vue项目中引入element ui

1.安装element ui

1. 安装 Element-UI 模块

   npm install element-ui --save

2.在main.js中全局引入element ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

接下来就可以全局使用element ui了

3.如何修改element ui中的默认样式

（因为VUE为了防止组件之间样式污染，会自带样式私有化，这会导致你的样式不会生效与当前开发工具当前页面之外的元素，也就是element自动生成的元素）

注意：更改element ui默认样式的时候要在<style ></style>标签里面写，而不是在<style scoped></style>里面写，可以在<style scoped></style>标签前面加个<style ></style>用来更改默认样式

<style scoped></style>和<style ></style>区别：不加scoped 的写的样式会作用于全局，加scoped的只作用在这个单文件里面。所以在<style ></style>里面修改element-ui全局样式的时候要加个标识，要不然串文件很麻烦

在这里插入图片描述

<el-form ref="form" :model="form" label-width="120px" label-position="top">
	<el-form-item  label="活动时间" class="p_binglijia_date">
	            <el-col :span="8">
	              <el-date-picker type="year" placeholder="选择年份" v-model="form.date1" style="width: 100%;"></el-date-picker>
	            </el-col>
	            <el-col  :span="2">年</el-col>
	            <el-col :span="8">
	              <el-date-picker  type="month" format="MM" placeholder="选择月份" v-model="form.date2" style="width: 100%;"></el-date-picker>
	            </el-col>
	            <el-col  :span="2">月</el-col>
	</el-form-item>
</el-form>

label-position="top" //label在头部显示
format="MM"  // 设置日期格式为只显示月份
type="year" //更改日期的样式
:model="form" //绑定数据

//加上这两句话取到的日期格式为 2018-12-23 这种
<el-date-picker
format="yyyy-MM-dd" 
value-format="yyyy-MM-dd">
 </el-date-picker>

elementui table表格中参数过长进行省略并且提示显示

在这里插入图片描述
效果如下

table表格中button按钮点击拿到参数

在这里插入图片描述

<el-table-column
          label="操作"
          width="140" align="center">
          <template slot-scope="scope">
            <router-link :to='"/bingli/Case/"+id' >
            <el-button type="primary"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>

js代码

export default {
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    }
  }
}

注意：scope.$index是获取点击元素的索引，scope.row是获取点击的元素的整个数据，tableData为获取表格中的所有数据。(scope.$index, scope.row)第一个scope.$index必须加

table表格多选框点击实现批量删除

1.给el-table加@selection-change=“handleSelectionChange”

<template>
<el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%"
        align="center">
</template>

<script>
export default {
 data: () => {
    return {
      checkTable:[],
  },
   methods: {
   //点击批量删除
    handleCheck(){
      for(var i =0;i<this.checkTable.length;i++){
        for(var j=0;j<this.tableData.length;j++){
          if(this.tableData[j].id==this.checkTable[i].id){
            console.log(this.tableData[j]);
            this.tableData.splice(j,1)
          }
        }
      }
      
    },
    
    handleSelectionChange(val){
    //val能拿到你checked点击选中的数组的值
      this.checkTable=val
        
    }
  }
}
</script>

table表格分页

<el-table
        @selection-change="handleSelectionChange"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%"
        align="center">
</el-table>
<el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change">
</el-pagination>

js:

 data: () => {
    return {
      total:100,
      currentPage:1,
      pagesize:10,
    }
  },
 methods: {
  
    current_change(currentPage){
      this.currentPage = currentPage;
    }, 
    getAllData(){
     let that=this
      this.$axios.post('http://localhost:3000/doctor/myPatient')
      .then(function (response) {
        that.total=response.data.length;
        that.tableData = response.data
      })
    },

element-ui的table表格控件表头与内容列不对齐问题

在这里插入图片描述
在全局样式中添加

  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */

  .el-table th.gutter{

    display: table-cell!important;

  }
# elementui更改el-table表头背景颜色和字体颜色
根据elementui官网的说法，header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

```javascript
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}">
...
</el-table>

更改后样式如下
在这里插入图片描述