当前位置: 首页 > article >正文

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>

http://www.kler.cn/a/516756.html

相关文章:

  • 解密堡垒机:安全与效率的守护者
  • Kyligence AI 数据智能体:首批亮相神州数码 DC·AI 生态创新中心!
  • 激光线扫相机无2D图像的标定方案
  • ThinkPHP 8模型与数据的插入、更新、删除
  • BW复制ERP数据源跑程序激活后才可见
  • 基于Springboot + vue实现的美发门店管理系统
  • 亚博microros小车-原生ubuntu支持系列:6-整体检测
  • Android SystemUI——快捷面板的创建(十四)
  • 禁止 iOS 系统浏览器双指放大页面
  • blender 安装笔记 linux 2025
  • 56.命令绑定 C#例子 WPF例子
  • (DM)达梦数据库基本操作(持续更新)
  • Springboot使用war启动的配置
  • 知识图谱结合大模型用于聊天分析
  • excel批量提取批注
  • c# 打印字符串
  • 迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-添加内核编译
  • C语言常用知识结构深入学习
  • vue项目的创建
  • GPU算力平台|在GPU算力平台部署MedicalGPT医疗大模型的应用教程
  • MyBatis最佳实践:MyBatis 框架的缓存
  • 3、搭建企业知识库:从需求分析到方案设计
  • 配电网的自动化和智能化水平介绍
  • Python中使用Ollama API
  • SpringBoot的Swagger配置
  • Javaweb之css