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

1.header-cell-style使用方法

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

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

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

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

当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;
}
1
2
3
4
5
6
7
8
9
10
11

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' }"
        >
1
2
3
4
5
6
7
8
9

当表格要实现互斥单选功能是,需要使用内置的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)
      //这里输出的数组当第一次选择的时候数组为一项，当多次选择之后数组中为两项，其中第二项为选中的值
      //这里可以根据输出的值的数组长度来拿到最新选择的值
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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();
        }
      },
1
2
3
4
5
6
7
8
9

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

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

    let rows=JSON.parse(window.sessionStorage.getItem("sceneTion"))
      if(rows!=null){
        this.datarows.push(rows)
           this.$nextTick(()=>{
            this.toggleSelection(this.datarows)
          })
1
2
3
4
5
6
7

当没有做互斥单选操作，此时需要在请求到的数组中拿出勾选的数组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)
          })
      }
1
2
3
4
5
6
7
8

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

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

el-table标签中加入select事件

 @select="handleSelectionChange"
1

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