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

本文主要是介绍element- plus table勾选框顶部勾选框更改成文字，且实现单选操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

 <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>

// 复选框标题更改为文字
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>

 

 

这篇关于element- plus table勾选框顶部勾选框更改成文字，且实现单选操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---