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>
相关推荐
橘子星2 小时前
深入理解 AJAX 中的 JSON 序列化与 JS 异步处理
前端·javascript·后端
旧曲重听12 小时前
2026前端技术从「夯」到「拉」
前端·程序人生·职场和发展·软件工程
Kapaseker2 小时前
我找到了最适合程序员的 PPT 工具 — Slidev
前端
夏幻灵2 小时前
深度解析 JavaScript 异步编程:从回调地狱到 Promise 的重构
开发语言·javascript·重构
雾削木2 小时前
B语言经典教程现代化重构
java·前端·stm32·单片机·嵌入式硬件
Cobyte2 小时前
20.Vue Vapor 的应用初始化
前端·javascript·vue.js
乘风gg2 小时前
手把手带你实践历时一年总结的 AI Code Review 最佳工作流!
前端·ai编程·cursor
禅思院2 小时前
POST请求发两次?一次讲透CORS预检机制,面试不再翻车
前端·架构·前端框架
IT_陈寒2 小时前
SpringBoot自动配置这么智能,为啥我写的Bean注入不了?
前端·人工智能·后端
LT10157974442 小时前
2026年Web自动化测试工具选型指南:多浏览器兼容解决方案
前端·测试工具·自动化