1、官网提供:手动添加一个el-table-column,设type属性为selection即可

<template>
    <div>
        <el-button @click="TestSelect">按钮</el-button>
    </div>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <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>
    <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
</template>

js:TestSelect 方法打印出 选择多行的内容

methods: {
    TestSelect:function(){
        //打印出 multipleTable 选择内容
        console.log(this.$refs.multipleTable.selection)
    },
    toggleSelection:function(rows) {
        if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
        });
        } else {
            //清楚选择内容
            this.$refs.multipleTable.clearSelection();
        }
    },
    handleSelectionChange:function(val) {
        //selection-change 当选择项发生变化时会触发该事件 ,打印出目前选中内容
        this.multipleSelection = val;
    }
}

测试效果如下:可以拿到每一行数据进行后续批处理

2、勾选列之后,切换页数会发现会清除之前选中的 (设置分页:https://blog.csdn.net/wx19900503/article/details/100926516)

此时候需要设置其他属性:

html:

<el-table
        :row-key="getRowKeys"
        ref="tableData"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style="width: 100%;margin-top:0.5%">
    <el-table-column
            reserve-selection=true
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            fixed
            prop="name"
            label="对比名称"
            width="120">
    </el-table-column>
</el-table> 

修改:methods:

getRowKeys: function (row) {
    //此处 根据实际数据选中字段
    return row.date;
},
getSelectData : function (row) {
    var selection = _self.$refs.tableData.selection
    //选择当前行[] 对象 可以打印进行控制台查看
    //selection[i].id 取当前行Id
}

测试如下:

 

Logo

前往低代码交流专区

更多推荐