(亲测可用)
这是element 中表格组件中的 多选 功能, 需要改成下图所标注的情况:
- 将element中的 table 表格 组件中的 多选 代码,拷贝到自己的前端项目中:
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
2. 去除 表头出行 多选的勾选框 :
在 el-table 的标签中 加上样式 class = "table-style",从样式上隐藏 该全选的勾选框, 代码如下:
<el-table
class= "table-style"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
.
.
.
.
<-- 从样式上 隐藏 全选勾选框 -->
<style lang="less">
.table-style {
.el-table-column--selection.is-leaf .el-checkbox {
display: none;
}
}
</style>
3. 将多选改为 单选 功能 :
在el-table 的标签中重新定义 一个方法 @select="selectInfo" ,用于将单选功能实现, 代码如下:
</template>
<el-table
class= "table-style"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@select="selectInfo">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
data() {
return {
multipleTable: "", //所选择的表格数据指向
};
},
.
.
methods: {
selectInfo(selection, row) {
console.log(selection, row);
// 清除 所有勾选项
this.$refs.multipleTable.clearSelection();
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if (selection.length == 0) return;
this.$refs.multipleTable.toggleRowSelection(row, true);
},
}
<script>
.
.
<-- 从样式上 隐藏 全选勾选框 -->
<style lang="less">
.table-style {
.el-table-column--selection.is-leaf .el-checkbox {
display: none;
}
}
</style>
以上就全部处理完毕,可以实现从多选到单选了☺☺☺