<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="选择">
<template slot-scope="scope">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox :label="scope.row.gameId">选中</el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkAll: false,
isIndeterminate: false,
checkedCities: [],
tableData: [],
multipleSelection: [],
checkedGameId: []
}
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? this.checkedGameId : []
this.isIndeterminate = false
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.checkedGameId.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedGameId.length
}
},
created() {
let res = {
'data': {
'list': [
{
gameId: '11111',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
gameId: '22222',
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
gameId: '33333',
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
gameId: '44444',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
}
this.tableData = res.data.list
for (let i = 0; i < this.tableData.length; i++) {
this.checkedGameId.push(this.tableData[i].gameId)
this.multipleSelection = this.checkedGameId
}
}
}
</script>
vue 之 element-ui 实现全选和复选框
最新推荐文章于 2024-06-20 15:56:08 发布
这是一个关于Vue.js的示例,展示了如何在表格中实现全选和单选功能。通过el-checkbox组件和v-model双向绑定,配合handleCheckAllChange和handleCheckedCitiesChange方法,可以实现对表格数据的选中状态管理。代码创建了一个包含日期、姓名和地址列的表格,并在最后一列添加了选择框,同时提供了全选和全取消的选择选项。
摘要由CSDN通过智能技术生成