element-plus 的table section如何实现单选
如果是单选那么全新的按钮应该隐藏或者不可编辑的状态。但是我没找到改变成不可编辑的方法,只能采取隐藏
<template> <!-- 注意要包一层div根元素,否则css样式可能会不生效,原因不详 --> <div> <el-table ref="proTable" class="table_wrapper" :data="tableData" @select="selectClick"> <el-table-column type="selection" width="55" /> <el-table-column prop="name" label="名称" /> </el-table> </div> </template> <script setup lang='ts'> import { ref, reactive, toRefs } from 'vue' const taskTableRef = ref(); // 表格ref // 变量定义 const state = reactive({ tableData: [{ name: '啦啦啦' }, { name: '嘻嘻嘻' }, { name: '哈哈哈' }], });
const selectClick = (selection: any, row: any) => { if (selection.length > 1) { let del_row = selection.shift(); proTable.value.toggleRowSelection(del_row, false); // 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) } console.log("勾选的是数组:",selection) }
<style lang="scss">
// 隐藏全选按钮。注意这里我没有加scoped
.table_wrapper th.el-table__cell:nth-child(1) .cell{
visibility: hidden;
}
</style>