element-ui表格单选改多选

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
    },
上一篇:程序设计与算法(一)测验汇总(2021秋季)-《032:计算鞍点》的一点思考


下一篇:【剑指 Offer II】 032. 有效的变位词