el-table 设置selection多选,实现单选功能
el-table 设置selection多选,实现单选功能
·
需求是使用el-table的多选功能,然后不想要多选改成单选。
代码
<template>
<div class="contentBox"
v-loading="loading">
<el-table :data="list"
ref="accountRef"
@select="handleTableChange">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column width="100" prop="name"></el-table-column>
<el-table-column width="100" prop="no"></el-table-column>
<el-table-column width="100" prop="date"></el-table-column>
</el-table>
</div>
</template>
<script>
import {
defineAsyncComponent,
defineComponent,
getCurrentInstance,
onMounted,
reactive,
toRefs,
} from "vue";
export default defineComponent({
components: { },
setup(props, context) {
const { proxy } = getCurrentInstance();
const accountRef = ref(null)
const data = reactive({
list: [],
selectTable: [],
});
//表格单选
const handleTableChange = (list, row) => {
if (list.length === 0) {
data.selectTable = [];
return
}
// let itemData = JSON.parse(JSON.stringify(row))
accountRef.value.clearSelection()
data.list.forEach((ele) => {
if (ele.id === row.id) {
accountRef.value.toggleRowSelection(ele, true)
data.selectTable = [ele];
}
})
};
return {
...toRefs(data),
handleTableChange,
accountRef
};
},
});
</script>
这里是vue3的写法
1、绑定table实例ref=“accountRef”,然后记的声明const accountRef = ref(null)和return返回里加上accountRef。
2、绑定select方法,定义handleTableChange函数 @select=“handleTableChange”
3、table的绑定事件select,select有两个回掉参数selection, row。selection选中的数据数组,row当前选中的数据。
4、table的方法,clearSelection()清除表格选中,toggleRowSelection(ele, true) 手动选中。先取清除选中,再根据勾选你选择的那一条数据。
5、 toggleRowSelection有两个参数一个是要选的数据,一个是该数据的状态,true选中,false不选
更多推荐
已为社区贡献7条内容
所有评论(0)