element- plus table勾选框顶部勾选框更改成文字,且实现单选操作

html 复制代码
 <el-table ref="multipleTableRef" :data="tableData" :row-key="(row: any) => row.id" style="width: 100%"
          :header-cell-class-name="cellClass" @select="handleSelectionChange">
          <el-table-column type="selection" width="55" ></el-table-column>
          <el-table-column property="formName" label="表单名称" />
          <el-table-column property="formCode" label="表单编码" show-overflow-tooltip />
        </el-table>
javascript 复制代码
// 复选框标题更改为文字
const cellClass = (row: any) => {
  if (row.columnIndex === 0) {
    return "selectionTitle";
  }
}

const handleSelectionChange = (selection: any, row: any) => {
  // 单选
  if (selection.length > 1) {
    let radioValue = selection.shift(); //shift() 是一个数组方法,用于移除并返回数组的第一个元素。
    multipleTableRef.value.toggleRowSelection(radioValue, false); // 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
  }

   //  rowId.value = row.id  //获取选中参数
}

<style scoped lang="scss">
:deep(.el-table) {
  .selectionTitle {
    .el-checkbox__inner {
      display: none;
      position: relative;
    }

    .cell::before {
      content: '选择';
      position: absolute;
      left: 10px;
    }
  }
}
</style>
相关推荐
软件技术NINI4 分钟前
基于SpringBoot和Vue的新能源汽车销售推荐系统
java·vue.js·spring boot·后端·汽车·毕业设计·毕设
程序员大阳29 分钟前
HTML+CSS+JS对话式实战(6)-学生端查看活动功能开发
javascript·css·html·模块·查看学生
jay神1 小时前
基于 YOLOv8 的轴承缺陷检测(Web 版)
前端·人工智能·yolo
jay神1 小时前
基于 YOLOv8 的森林火灾检测系统(Web 版)
前端·yolo
code2cat1 小时前
HTML基础篇之第一张网页:从index.html到浏览器里的任务清单
前端·html
miss2 小时前
AI 改完不敢上线?OpenSpec 规约驱动开发实战
前端·代码规范·前端工程化
招风的黑耳2 小时前
SpringBoot+Vue+MySQL 民宿在线预定平台 完整可运行版(源码+文档)
vue.js·spring boot·mysql
AiMan2 小时前
腾讯ima还是不可以导出左侧所有对话,只能单条导出,方法不对吗
前端
去伪存真2 小时前
并发量一高就装死?Agent 全链路“防猝死”手册
前端·agent
Moment3 小时前
AI 编程时代,聊聊我的 Mac mini 双屏桌面
前端·后端