element-ui表格单选

最新推荐文章于 2024-05-10 09:26:14 发布

Levana_※

最新推荐文章于 2024-05-10 09:26:14 发布

阅读量168

点赞数 3

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/moran_3346/article/details/136641819

版权

文章详细描述了如何在Vue项目中使用ElementUI的el-table组件实现两个表格的单选或多选功能，包括clearSelection、getSelectionRows、toggleRowSelection和toggleAllSelection等方法的用法。

摘要由CSDN通过智能技术生成

一个表格单选：

<template>
    <div>
        <el-table :data="firstTableList" 
                    ref="firstMultipleTable" 
                    @select="firstSelectChange">
            <el-table-column type="selection" width="25" align="center">
        </el-table>
    </div>
</template>
<script>
    export default {
        name:"table",
        data() {
            return {
                firstTableList:[],
            }
        },
        method: {
            firstSelectChange(){
                if(selection.length > 1){
                    <!-- ->
                    const del_row = selection.shift();
                    <!-- ->
                    this.$refs.firstMultipleTable.toggleRowSelection(del_row, false);
                }
            },
        }
    }
</script>

两个表格单选：

<template>
    <div>
        <el-table :data="firstTableList" 
                    ref="firstMultipleTable" 
                    @select="firstSelectChange">
            <el-table-column type="selection" width="25" align="center">
        </el-table>
        <el-table :data="secondTableList" 
                    ref="secondMultipleTable" 
                    @select="secondMultipleTable">
            <el-table-column type="selection" width="25" align="center"/>
        </el-table>
    </div>
</template>
<script>
    export default {
        name:"table",
        data() {
            return {
                firstTableList:[],
                secondTableList:[],
                selectionRow:0
            }
        },
        method: {
            firstSelectChange(){
                if(selection.length > 1){
                    const del_row = selection.shift();
                    this.$refs.firstMultipleTable.toggleRowSelection(del_row, false);
                }else if(selection.length != 0){
                    this.selectionRow = this.selectionRow + 1;
                    if(this.selectionRow != selection.length){
                        this.$refs.secondMultipleTable.clearSelection();
                    }
                }
            },
            secondMultipleTable(){
                if(selection.length > 1){
                    const del_row = selection.shift();
                    this.$refs.secondMultipleTable.toggleRowSelection(del_row, false);
                }else if(selection.length != 0){
                    this.selectionRow = this.selectionRow + 1;
                    if(this.selectionRow != selection.length){
                        this.$refs.firstMultipleTable.clearSelection();
                    }
                }
            }
        }
}
</script>

表格方法：

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择
getSelectionRows	返回当前选中的行
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否	row, selected
toggleAllSelection	用于多选表格，切换全选和全不选