element ui --table 點擊每行實現選中效果、多選、全選、及禁選。

element ui table里 自帶Checkbox組件，所以結合組件自身實現單擊每行，實現這行的選中效果。代碼如下:

<el-table border 
       v-show="blurShow"
       :row-class-name="tableRowClassName"
       @row-click="getAddLisy"
       @selection-change="handleSelectionChange"
       ref="multipleTable"
       :data="searchData">
       <el-table-column 
                type="selection"
                width="55"
                :selectable="selectabele">
       </el-table-column>
       <el-table-column align="center" prop="materialCode" label="物料編碼">
                <template slot-scope="scope">
                        <span v-if="scope.row.materialCode">{{scope.row.materialCode | sliceNumber}}</span>
                </template>
       </el-table-column>
       <el-table-column align="center" prop="materialDesc" label="物料描述"></el-table-column>
</el-table>

方法：

 // 點擊每行添加數據
      getAddLisy(row){
            if(!row.disabled){
                this.$refs.multipleTable.toggleRowSelection(row);
            }else{
                console.log('已添加了該耗材')
            }
        },
  // 全選
        handleSelectionChange(val) {
            this.selectionChangeList = val;
        },
        // 多選框根據條件禁止選擇
        selectabele(row){
            if(row.isChecked){
                this.$set(row,'disabled',true);
                return false
            }else{
                return true
            }
        },

selectionChangeList 為選中的數據組成的數組。