制作如图所示的表格全选、半选：
父组件
<template><div id="app"><SelectHost :hostArray="hostArray" /></div>
</template><script>
import SelectHost from './components/SelectHost.vue'
export default {name: 'App',components: {SelectHost},data() {return {hostArray: [{"uuid": "bdd6565dfef7424885e48b655134b856","ip": "30.184.21.55","port": "80","priority": "0","status": "Running","vmName": "CQB-L0703002","vmType": "ECS","weight": "10"},{"uuid": "493e1c76bbd4457aa74a9066f0eb1fa3","ip": "30.184.8.7","port": "80","priority": "0","status": "Running","vmName": "CQB-L0615064","vmType": "ECS","weight": "10"},{"uuid": "6f98e7fa0ec94ca7923afc11660ea642","ip": "30.98.188.157","port": "80","priority": "0","status": "Running","vmName": "SZE-L0812244","vmType": "ECS","weight": "1"}]}},
}
</script><style lang="scss">
#app {padding: 20px;
}
</style>
子组件：自己手搓
<template><div style="position: relative"><!-- 全选 or 取消全选 --><div class="header-checkbox"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll" /></div><el-table :data="hostArray" border><el-table-column width="44" align="center" class-name="row-uuid"><template slot-scope="scope"><el-checkbox-group v-model="checkList" @change="handleCheckRow"><el-checkbox :label="scope.row.uuid" /></el-checkbox-group></template></el-table-column><el-table-column label="主机名" prop="vmName" align="center" /><el-table-column label="主机IP" prop="ip" align="center" /><el-table-column label="状态" prop="status" align="center" /><el-table-column label="主机类型" prop="vmType" align="center" /><el-table-column label="后端端口" prop="port" align="center" /><el-table-column label="权重" prop="weight" align="center" /><el-table-column label="优先级" prop="priority" align="center" /></el-table></div>
</template><script>
export default {name: 'SelectHost',props: {hostArray: {type: Array,default: []}},data() {return {isIndeterminate: false, // 设置半选的样式checkAll: false, // 全选、取消全选的状态checkList: [], // 单元行的选择状态}},methods: {// 全选、取消全选handleCheckAll(val) {this.checkList = val ? this.hostArray.map(item => item.uuid) : []this.isIndeterminate = false},// 单元行的选择handleCheckRow(value) {const checkedCount = value.lengththis.checkAll = checkedCount === this.hostArray.lengththis.isIndeterminate = checkedCount > 0 && checkedCount < this.hostArray.length}},
}
</script><style lang="scss" scoped>
::v-deep .row-uuid .el-checkbox__label {display: none;
}
.header-checkbox {width: 20px;height: 20px;position: absolute;left: 15px;top: 10px;
}
</style>子组件：Element UI封装好的
<template><div><el-tableref="multipleTable":data="hostArray"border@selection-change="handleSelectionChange"><el-table-columntype="selection"width="44"></el-table-column><el-table-column label="主机名" prop="vmName" align="center" /><el-table-column label="主机IP" prop="ip" align="center" /><el-table-column label="状态" prop="status" align="center" /><el-table-column label="主机类型" prop="vmType" align="center" /><el-table-column label="后端端口" prop="port" align="center" /><el-table-column label="权重" prop="weight" align="center" /><el-table-column label="优先级" prop="priority" align="center" /></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([hostArray[1], hostArray[2]])">切换第二、第三行的选中状态</el-button><el-button @click="toggleSelection()">取消选择</el-button></div></div>
</template><script>
export default {name: 'SelectHost',props: {hostArray: {type: Array,default: []}},data() {return {multipleSelection: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row)})} else {this.$refs.multipleTable.clearSelection()}},handleSelectionChange(val) {this.multipleSelection = val}},
}
</script><style lang="scss" scoped>
</style>
