本文主要是介绍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
    },

这篇关于element-ui表格单选改多选的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！