效果图:
完整的小样例:
<template>
<div>
<el-table :data="allnews" style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55" :selectable="selectable" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column align="center" prop="name" label="栏目" width="140" />
</el-table>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue"
//模拟数据
const allnews = ref([{ id: "110", name: "111" }, { id: "112", name: "000" }, { id: "113", name: "000" }])
//复选框勾选上之后,赋予新的数组数据
const checkboxdata = ref([] as any)
//勾选时某一行的数据
const handleSelectionChange = (val: any) => {
console.log(val);
checkboxdata.value = [...val]
}
//超出选择条数时禁用勾选
const selectable = (row: any, index: number) => {
//根据实际情况,真实数据的id改变其中的id名称,这里的id是数据里面的id,真实数据极少有直接是id名字的
index = checkboxdata.value.findIndex((item: any) => item.id === row.id)
//需要限制多少条随便写
if (checkboxdata.value.length >= 2) {
//勾选取消后需要重新返回勾选状态
if (index !== -1) {
return true
} else {
return false
}
} else {
return true
}
}
</script>
<style>
/* 不需要全选按钮,将其藏起来 */
/* 注意:不要放在style标签有 scoped 的属性里面,单独开一个纯净的style标签 */
.el-table__header .el-checkbox {
display: none;
}
</style>