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>
相关推荐
恋猫de小郭22 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA2 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间6 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪7 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer7 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu8 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui