element行点击事件与行内按钮点击事件的同时实现与隔离

行点击事件、行内按钮点击事件的隔离

1.问题描述

用vue写前端、用element作ui时，写表格遇到的小问题：点击行触发多选框选中与点击行内的按钮冲突

如何解决：利用handleRowClick(row, column, event)的column.label将有按钮的列隔离起来即可

2.较好效果

1.可以全选、多选，获得所选行的数组，然后可以进行批量操作：

2.点击操作一列的按钮，不会触发行点击事件、不会选中此行的复选框：

3.选择几行，点击按钮，获得所选行数组：

3.完整代码【单组件.vue文件中写法export default 中写法一样】

官改代码源 Table 表格 ：搜 多选 Checkbox
可跑在线运行尝试一下：
html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleSelectConfirm" round>操作多选行</el-button>
  </div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    >
    <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-column label="操作">
      <el-button type="primary" icon="el-icon-edit" @click="btn_handle"></el-button>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>
</div>

script

var Main = {
    data() {
      return {
        multipleSelection: [], // 表格被选中行数组
        tableData: [{
          date: '2019-12-27',
          name: '小明',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2019-12-27',
          name: '小明',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2019-12-27',
          name: '小明',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2019-12-27',
          name: '小明',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2019-12-27',
          name: '小明',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      btn_handle() {
        console.log("按钮点击事件")
      },
      handleSelectConfirm() {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var eachRow = this.multipleSelection[i]
          console.log(eachRow)
          // eachRow即为选中数组里的值
          // this.$axios.post().then(res => {
          //
          // });
        }
      },
      // 点击行触发，选中/不选中复选框；点击“姓名”“操作”列不触发行事件
      handleRowClick(row, column, event) {
        // console.log(column.label)
        if (column.label === '操作' || column.label === '姓名') {
          console.log('不走行点击事件')
        } else {
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

4.单组件.vue文件中所有代码及简略效果

效果：

tableTest.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" round @click="handleSelectConfirm">操作多选行</el-button>
      <el-button @click="toggleSelection([tableData[0], tableData[1]])">切换第一、第二行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" width="55" />
        <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 prop="address" label="地址" show-overflow-tooltip />
        <el-table-column label="操作"><el-button type="primary" icon="el-icon-edit" @click="btn_handle" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    currencydecimal(value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      multipleSelection: [], // 表格被选中行数组
      tableData: [{
        date: '2019-12-27',
        name: '小明',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2019-12-27',
        name: '小明',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2019-12-27',
        name: '小明',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2019-12-27',
        name: '小明',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2019-12-27',
        name: '小明',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    btn_handle() {
      console.log('按钮点击事件')
    },
    handleSelectConfirm() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const eachRow = this.multipleSelection[i]
        console.log(eachRow)
        // eachRow即为选中数组里的值
        // this.$axios.post().then(res => {
        //
        // });
      }
    },
    // 点击行触发，选中/不选中复选框；点击“姓名”“操作”列不触发行事件
    handleRowClick(row, column, event) {
      // console.log(column.label)
      if (column.label === '操作' || column.label === '姓名') {
        console.log('不走行点击事件')
      } else {
        this.$refs.multipleTable.toggleRowSelection(row)
      }
    }
  }
}
</script>