开发环境:vue 2.x + element-ui 2.x
先看张图片
如上图所示,表格的复选框是否可用,它是根据数据的审核状态来控制的。当状态为已审核时,复选框为禁用状态。而 el-table 组件中并没有提供这样的功能,所以需要我们自己来控制。下面是具体实现代码:
HTML 部分
<el-table :data="list" @select-all="selectAll">
<!-- type="selection" 用于全选 -->
<el-table-column type="selection" width="55" align="center" key="chkbox">
<template slot-scope="scope">
<!-- 复选框 -->
<el-checkbox v-model="scope.row.checked" :disabled="scope.row.status === 1" @change="selectChange(scope.row)"></el-checkbox>
</template>
</el-table-column>
<!-- 省略其它列... -->
</el-table>
JAVASCRIPT 部分
export default {
data() {
return {
list: [],
selectedRow: [],
page: { index: 1, size: 20 }
}
},
methods: {
// 通过接口获取列表数据
async getList() {
const _list = await $http.get('/api/list', { ...this.page })
// 遍历数据,添加 checked 属性,用于控制复选框是否选中
this.list = _list.map(x => {
return {
...x,
checked: false, // 默认不选中
}
})
// 回显,注意:需要等表格渲染完成,否则无效,可以使用 $nextTick
this.$nextTick(() => {
// 数据翻页后,保持选中状态
this.selectedRow.forEach(item => {
const one = this.list.find(i => i.id == item.id)
one && (one.checked = true)
})
})
},
// 复选框切换
selectChange (row) {
const index = this.selectedRows.findIndex(item => item.id == row.id)
if (index !== -1) {
this.selectedRows.splice(index, 1)
row.checked = false
} else {
this.selectedRows.push(row)
row.checked = true
}
},
// 全选
selectAll (selection) {
if (selection.length > 0) {
selection.forEach(item => {
// 注意,全选的时候要排除状态为已审核的数据,因为已审核的数据是禁用的,复选框处于 disabled 状态,不能选中
// 并且为了防止重复添加,需要判断是否已经存在 selectedRows 数组中,不存在的才 push
if (item.status === 0 && this.selectedRows.findIndex(i => i.id == item.id) < 0) {
item.checked = true
this.selectedRows.push(item)
}
})
} else {
this.list.forEach(item => {
const index = this.selectedRows.findIndex(i => i.id == item.id)
if (index !== -1) {
item.checked = false
this.selectedRows.splice(index, 1)
}
})
}
}
}
}
我们利用 el-table 的 @select-all 事件,来实现全选功能。而单行的选择则使用 el-checkbox 组件,通过 @change 事件来控制复选框的选中状态。这样就可以通过状态来控制 el-checkbox 的 disabled 属性,从而实现复选框的禁用功能。另外,我们给数据源添加 checked 属性,用于控制复选框的选中状态。