elementui table获取选中行的行号或索引（非人类的设计）

vue keep-alive 缓存

vue禁止devtools使用

Jun 30

tommyhu , 07:59 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(114) , Via Original

Large | Medium | Small

table章节https://element.faas.ele.me/#/zh-CN/component/table
选中一行，行内点击选中或者checkbox选中都无法获取行号或索引，真是无比坑爹的设计
拿到数据再去数组里做map或foreach，
可以说一句 fuck么

当selection-change事件触发后，写入以下代码

<template>
  <div>
    <el-button type="primary" @click="handleEditClick">编辑</el-button>
    <el-button type="warning" @click="handleDeleteClick">删除</el-button>
    
    <el-button @click="toggleSelection()">取消选择</el-button>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" height="500">
      <el-table-column type="selection" width="55">
      </el-table-column>

<el-table-column prop="name" label="姓名" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
          <el-button type="danger" size="mini" icon="el-icon-plus" circle  @click="handleAddClick(scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

methods: {
    getROwIndex(row){
        let _index = this.tableData.lastIndexOf(row)
        return _index
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      this.selectIndexArray = []
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let _this = this;
      val.map((val, index) => {
        let selectRowIndex = this.getROwIndex(val)
        if(selectRowIndex!==-1){
            console.log(selectRowIndex);
            _this.selectIndexArray.push(selectRowIndex);
        }
      });
    },
    handleEditClick() {},
    handleAddClick(row) {
      let index = this.getROwIndex(row)
      console.log(index)
    },
    handleDeleteClick() {}
  }
};
</script>

▲返回顶部
Last modified by tommyhu on2018/06/30 08:35

Tags: elementui , table获取选中行的行号或索引（非人类的设计）

TOMMYHU

elementui table获取选中行的行号或索引（非人类的设计）

Categories

热门围观排行榜：

Latest Entries

随便拿点来看看：

Latest Comments

好多好多关键词

这些词比较火爆