web前端-Vue Element table多选表格实现单选

素颜马尾好姑娘i 2023-10-03 11:38 27阅读 0赞

Element table，多选单选主要使用的是ElementUI多选表格中的方法

1、事件  
**select** 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row  
**row-click** 事件 当某一行被点击时会触发该事件 参数 row, column, event  
**selection-change** 事件 当选择项发生变化时会触发该事件 参数 selection  
**clearSelection** 方法 用于多选表格，清空用户的选择  
**toggleRowSelection** 方法 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 参数row, selected

2、Vue代码

<el-table
        ref="multipleTable"
        :data="inputRemoteTable"
        :header-cell-style="{background:'#eeeeee',color:'#666666'}"
        border
        style="width: 100%"
        fixed
        v-loading="InputDialogLoading"
        @select="select"
        @row-click="rowClick"
        @selection-change="selectionChange"
        stripe>
            
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
    
            <el-table-column
                prop="label"
                label="名称"
                >
            </el-table-column>
            <el-table-column
                prop="value"
                label="昵称"
                >
            </el-table-column>
    </el-table>

3、js方法

select(selection, row) {
    	// 清除 所有勾选项
    	this.$refs.multipleTable.clearSelection()
    	// 当表格数据都没有被勾选的时候 就返回
    	// 主要用于将当前勾选的表格状态清除
    	if(selection.length == 0) return 
    	this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    // 表格的选中 可以获得当前选中的数据
    selectionChange(section) {
    	// 将选中的数据存储起来
        this.selectData = section
    },
    // 表格某一行的单击事件
    rowClick(row, column) {
        const selectData = this.selectData
        this.$refs.multipleTable.clearSelection()
        if( selectData.length == 1 ) {
            selectData.forEach(item => {
            	// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
                if (item == row) {
                    this.$refs.multipleTable.toggleRowSelection(row, false);
                }
                // 不然就让当前的一行勾选
                else {
                    this.$refs.multipleTable.toggleRowSelection(row, true);
                }
            })
        } 
        else {
            this.$refs.multipleTable.toggleRowSelection(row, true);
        }
    },