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是取消選中
            },