elementui表格单选改多选
首先绑定el-table
的@select
事件为以下函数,绑定ref="table"
(或者其他名字)
<template>
<el-table :data="data" ref="myTable" stripe tooltip-effect="dark" @select="handleSelectionChange" height="calc(100vh - 240px)" width="100%">
<el-table-column type="selection" width="65"> </el-table-column>
<el-table-column type="index" label="序号" width="300">
</el-table-column>
<el-table-column prop="paramName" label="网域名称" width="500">
</el-table-column>
<el-table-column prop="paramValue" label="默认IP"> </el-table-column>
</el-table>
</template>
currentRow用于代表当前选中行
tableData从来展示表格信息
export default {
data() {
return {
currentRow:null;
tableData: [
{
number: "1",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
{
number: "2",
name: "报警主机7-735****设备防区报警",
type: "防区报警",
source: "733东南红外-032",
grade: "事件",
defence: "全天候模板",
linkage: "是",
subsystem: "入侵报警",
},
],
}
声明函数
handleSelectionChange(selection, row) {
this.$refs.myTable.clearSelection();
if (selection.length === 0) {
this.currentRow = null
return;
}
this.$refs.myTable.toggleRowSelection(row, true);
this.currentRow = row
},