vue element-ui checkbox table 实现

<template slot-scope="scope" slot="header">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll" @change="handleCheckAllChange">
</el-checkbox>
</template>
<template slot-scope="scope">
<el-checkbox-group v-model="checkedArrIds" @change="handleCheckedIdsChange">
<el-checkbox :checked="scope.row.relStatusCurProject===1" :label="scope.row.eleCode"></el-checkbox>

</el-checkbox-group>
</template>

checkAll: false,
isIndeterminate: false,
checkedArrIds: [],
multipleSelection: [],
checkedIds: [],

handleCheckAllChange(val) {
this.checkedArrIds = val ? this.checkedIds : []
this.isIndeterminate = false
console.log(val)
console.log(this.isIndeterminate)
console.log(this.checkedArrIds)
console.log('checkedArrIds')
},
handleCheckedIdsChange(value) {
console.log(value)
console.log('valueeeeee')
const checkedCount = value.length
this.checkAll = checkedCount === this.checkedIds.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedIds.length
console.log(value)
console.log(value.length)
console.log(this.isIndeterminate)
console.log('value')
},

   this.tableData = rs
          for (let i = 0; i < this.tableData.length; i++) {
            this.checkedIds.push(this.tableData[i].id)
            this.multipleSelection = this.checkedIds
          }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容