效果:
代码:
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column>
<template slot="header" slot-scope="scope">
<el-checkbox :indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange">多选</el-checkbox>
</template>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"
@change="handleCheckOneChange(scope.row)"></el-checkbox>
</template>
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="sex">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
tableData: [{
name: '张三',
sex: '男',
checked: false
}, {
name: '李四',
sex: '女',
checked: true
}],
checkAll: false,
isIndeterminate: true
}
},
methods: {
handleCheckAllChange (val) {
// val 是该行对象中的checked属性
console.info('check all change is ', val)
this.isIndeterminate = false
this.tableData.forEach(item => {
item.checked = val
})
},
handleCheckOneChange (obj) {
// obj 是指该行的整个对象
console.info('check one change is ', obj)
let totalCount = this.tableData.length
let someStatusCount = 0
this.tableData.forEach(item => {
if (item.checked === obj.checked) {
someStatusCount++
}
})
this.checkAll = totalCount === someStatusCount ? obj.checked : !obj.checked
this.isIndeterminate = someStatusCount > 0 && someStatusCount < totalCount
}
}
}
</script>