重寫elementui中el-table多個(gè)checkbox基礎(chǔ)功能
表格組件中有內(nèi)置的checkbox只需要設(shè)置type=selection，但是如果需要多個(gè)checkbox復(fù)選框selection灾杰，或者checkbox里面的dom有其他功能（包括需要顏色晌坤，不同狀態(tài)等）佛南，那么就需要在重寫el-table內(nèi)部的el-checkbox的功能晃酒，在template 里面故源，包括頭部的內(nèi)容和列表內(nèi)的內(nèi)容
// 頭部
<template slot="header" slot-scope="scope"></el-table-column>
// 列表內(nèi)
<template slot-scope="scope"></el-table-column>
完整實(shí)現(xiàn)到type=selection基礎(chǔ)功能紊遵，主要兩個(gè)方法：table頭部方法handleSelectedFn()和點(diǎn)擊table列表內(nèi)方法handleListSelectedFn()
<template>
<div>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="selection" label="選擇" width="180">
<template slot="header" slot-scope="scope">
<div>
<el-checkbox v-model="selection" :indeterminate="isIndeterminate"
@click.prevent.stop.native="handleSelectedFn('selection', 'isIndeterminate', scope)">
</el-checkbox>
</div>
</template>
<template slot-scope="scope">
<div>
<el-checkbox v-model="scope.row.selection"
@click.prevent.stop.native="handleListSelectedFn('selection', 'isIndeterminate', scope)">
</el-checkbox>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址" width="180"> </el-table-column>
<el-table-column prop="phone" label="電話" width="180"></el-table-column>
<el-table-column prop="isRight" label="是否通過" width="180">
<template slot="header" slot-scope="scope">
<div>
{{ "是否通過" }}
<el-checkbox v-model="pass" :indeterminate="isIndeterminate1"
@click.prevent.stop.native="handleSelectedFn('pass', 'isIndeterminate1', scope)">
</el-checkbox>
</div>
</template>
<template slot-scope="scope">
<div>
<el-checkbox v-model="scope.row.pass"
@click.prevent.stop.native="handleListSelectedFn('pass', 'isIndeterminate1', scope)">
</el-checkbox>
</div>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button type="primary" @click="getTableDataFn">確定</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '張三',
address: '3',
phone: "1",
selection: false,
pass: false
},
{
name: '李四',
address: '3',
phone: "1",
selection: false,
pass: false
},
{
name: '王五',
address: '3',
phone: "1",
selection: false,
pass: false
},
{
name: '趙六',
address: '3',
phone: "1",
selection: false,
pass: false
},
],
pass: false,
selection: false,
isIndeterminate: false,
isIndeterminate1: false,
}
},
methods: {
handleSelectedFn(selectionvalue, isIndeterminatevalue) { // 點(diǎn)擊table頭部全選框
// 頭部全選框狀態(tài)改變
this[selectionvalue] = !this[selectionvalue];
// 列表選擇框狀態(tài)改變
for (let i = 0; i < this.tableData.length; i++) {
this.tableData[i][selectionvalue] = this[selectionvalue];
this[isIndeterminatevalue] = false;
}
},
handleListSelectedFn(selectionvalue, isIndeterminatevalue, scope) { // 點(diǎn)擊table列表內(nèi)的選擇框
// table列表內(nèi)選擇框狀態(tài)改變
this.tableData[scope.$index][selectionvalue] = !this.tableData[scope.$index][selectionvalue]
// 判斷是否在全選狀態(tài)下
let statusSelectio = this.allSelectionFn(selectionvalue)
if (statusSelectio) {
// 列表全部被選中,頭部變更為選中狀態(tài)
this[selectionvalue] = true;
this[isIndeterminatevalue] = false;
return false
}
// 列表有選中且非全選雹锣，頭部全選框待定狀態(tài)
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i][selectionvalue] === true) {
this[isIndeterminatevalue] = true;
return false
}
}
// 列表有沒有選中，頭部全選框未選狀態(tài)
this[isIndeterminatevalue] = false;
this[selectionvalue] = false;
},
allSelectionFn(selectionvalue) { // 判斷是否在全選狀態(tài)下
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i][selectionvalue] !== true) {
return false
}
}
return true
},
getTableDataFn() {
for (let i = 0; i < this.tableData.length; i++) {
console.log("selection:",this.tableData[i].selection);
console.log("pass:",this.tableData[i].pass);
}
}
}
}
</script>
