如何获得element-ui表格中的勾选项的index？

Question

这个是一个vue单文件的template,使用了element-ui库

我怎么可以拿到勾选项的index，然后一起删掉所勾选的?

Answer 1

我遇到了类似的问题，就是在表格翻页的时候让索引也跟着累加起来，我查遍了element-ui得我文档也没有这个说明，只是有一个type="index"，但是这个是不会累加的。因为我可以获取当前是第几页（pageNumber）和当前页的条数（pageSize），所以只需要在获取到当前行的index就可以实现索引累加了。最后发现两种解决方案：

 一、让后台给你传数据的时候顺便把每一行的index传过来。
 二、文档中有一个tableRowClassName方法，可以获取到当前行的index，
 
  tableRowClassName(row, index) {
            //把每一行的索引放进row
            row.index = index
  }
  这个时候利用formatter就可以实现索引累加啦
  formatter(row, column ,cellValue) {
            //放回索引值
            return this.pageSize * (this.page - 1)  + 1+ row.index;
  },
  

贴出所有代码：

<template>

<div v-loading="loading">
    <el-table
            :data="list"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%">
        <el-table-column
                type="index"
                label="121"
                width="50">
        </el-table-column>
        <el-table-column
                prop="module"
                :formatter="formatter"
                label="序号"
                width="50">
        </el-table-column>
        <el-table-column
                prop="module"
                label="module"
                width="180">
        </el-table-column>
        <el-table-column
                prop="event"
                label="行为"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ip"
                label="ip"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ip"
                label="操作"
                width="180">
            <template scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
        </el-pagination>
    </el-col>
</div>

</template>
<script type="text/ecmascript-6">

export default {
    data() {
        return {
            list:[],
            currentPage:1,
            total:0,
            page:1,
            pageSize:10,
            loading:false
        }

    },
    beforeCreate(){//加载页面之后执行

    },
    methods: {
        tableRowClassName(row, index) {
            //把每一行的索引放进row
            row.index = index
        },
        formatter(row, column ,cellValue) {
            //放回索引值
            return this.pageSize * (this.page - 1)  + 1+ row.index;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getList();
        },
        handleClick(val){
            console.log(val.ip)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getList();
        },
        getList(){
            var that = this;
            that.loading = true;
            this.$axios({
                        method:'post',
                        url:'http://192.168.1.51:8180/organization/test/toPay',
                        params: {
                            limit:that.pageSize,
                            offset:that.page
                        }
                    })
                    .then(function(response) {
                        that.loading = false;
                        console.log(response,"Fdsafdsa");
                        that.list = response.data.rows
                        that.total = response.data.total
                    })
                    .catch(function (response) {
                        that.loading = false;
                        console.log(response);
                    });
        }
    },
    mounted() {
        this.getList();
    }
}

</script>
<style>

.el-table .cell {
    word-break: normal;
}

</style>

Answer 2

我用一个非常土办法的办法可以实现，刚开始我想在单元格中添加自定义属性，发现elementUI中无法添加自定属性，然后就在单元格中添加一个隐藏的元素，把该元素的内容赋值为该行的index。所以获取index的问题转换成了获取该隐藏元素的内容，这个很好办，通过表格的cell-click事件获取单元格，然后利用DOM获取隐藏的元素！问题搞定！

1. 以上是个很low的办法，其实官网实例有个很好的办法，参考如下代码

<template>
    <div id="app">
    <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column  label="日期" width="180">
            <template scope="scope"><p @click=handleRow(scope.$index)>{{ scope.row.date }}</p>                                         </template>            
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </template>
    </div>
</template>

<script>
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods: {
          handleRow(index) {
            alert(index)
        }
      }
</script>

Answer 3

row-key="id" @selection-change="changed"

---

changed(selection) {
    this.selection = selection
},
removeSelected() {
    this.items = this.items.filter(t => !this.selection.some(s => s.id === t.id))
}

Answer 4

@面对疾风吧 的解决方法值得一鉴。很棒！

Answer 5

我也遇到了这问题,首先谢谢@Chobits 思路,我司需求是在几个输入框上填好资料后后点击添加按钮生成一行,按删除按钮删除选中的行 实现需求:在添加的时候给输入框值组成的对象添加一个id加入对象,再和selection-change事件获得的对象进行筛选,就是这行代码:this.items = this.items.filter(t => !this.selection.some(s => s.id === t.id))

Answer 6

题主有解决方案了吗？我现在也遇到这个问题

Answer 7

不懂不懂，求大神详细解答

Answer 8

tableRowClassName(row, index) {
            //把每一行的索引放进row
            row.index = index
  }

为什么我翻页后 index 又是从0开始的呢 而没有接到上一页