Element UI Table常用使用方法（header-cell-style；表头中的全选框取消；单选互斥功能；自动勾选toggleRowSelection方法）

1.header-cell-style使用方法

header-cell-style方法是改变表格头部样式的内置属性，可以配置表头的样式

:header-cell-style="{ background: '#f3f6fd', color: '#555' }"

2.表格的type=”selection”的使用方法,将表头中的全选框取消

 <el-table-column type="selection"> </el-table-column>

当el-table增加改属性后会增加全选功能,需求是将表头中的全选框取消，下面的css代码需要放在App.vue中。在组件的style中不生效

.el-table__header .el-table-column--selection {  visibility: hidden;  background: red !important;  z-index: 99999;}.el-table__header-wrapper {  background: #f3f6fd;}li {  list-style: none;}

3.type=”selection”属性，单选互斥功能

当设置type=”selection”属性时，ui默认是可以多选的，需求是table单选，

<el-table          ref="multipleTable"          :data="tableData"          @selection-change="selectionChange"          @select="select"          tooltip-effect="dark"          style="width:100%;height:80%;overflow: auto;"          :header-cell-style="{ background: '#f3f6fd', color: '#555' }"        >

当表格要实现互斥单选功能是,需要使用内置的selection-change和select事件前者为：当选择项发生变化时会触发该事件；后者为:当用户手动勾选数据行的 Checkbox 时触发的事件

 select(selection, row) {      // 清除 所有勾选项      this.$refs.multipleTable.clearSelection();      // 当表格数据都没有被勾选的时候 就返回      // 主要用于将当前勾选的表格状态清除      if (selection.length == 0) return;      this.$refs.multipleTable.toggleRowSelection(row,true);    },    // 表格的选中 可以获得当前选中的数据    selectionChange(val) {      // 将选中的数据存储起来      console.log(val)      //这里输出的数组当第一次选择的时候数组为一项，当多次选择之后数组中为两项，其中第二项为选中的值      //这里可以根据输出的值的数组长度来拿到最新选择的值    },

4.table表格页面渲染完成自动勾选toggleRowSelection使用

toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

 toggleSelection(rows) {        if (rows) {          rows.forEach(row => {            this.$refs.multipleTable.toggleRowSelection(this.tableData.find(v=>v.scenario_id==row.scenario_id),true);          });        } else {          this.$refs.multipleTable.clearSelection();        }      },

在表格渲染的请求方法的回调中 使用

当做了单选操作存储的数组只有一项时

    let rows=JSON.parse(window.sessionStorage.getItem("sceneTion"))      if(rows!=null){        this.datarows.push(rows)           this.$nextTick(()=>{            this.toggleSelection(this.datarows)          })

当没有做互斥单选操作，此时需要在请求到的数组中拿出勾选的数组this.tableData.filter过滤拿到的是available==ture表示被勾选状态

   let rows= this.tableData.filter(v=>v.available==true)        //   if()      if(rows!=null){          this.datarows=rows           this.$nextTick(()=>{            this.toggleSelection(this.datarows)          })      }

this.$nextTick表示在页面渲染完成时执行，如果不用在页面加载完成时效果不生效。

5.判断用户勾选还是取消勾选

el-table标签中加入select事件

 @select="handleSelectionChange"

      //勾选         handleSelectionChange(rows, row) {            let selected = rows.length && rows.indexOf(row) !== -1            // console.log(selected)  // true就是选中，0或者false是取消选中            },