ElementUI中el-table多选表格实现单选效果

小马同学:)

于 2024-07-01 15:33:16 发布

阅读量125

点赞数 2

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_46239099/article/details/140102165

版权

HTML代码：

<el-table :data="tableData" ref="singleTable" @selection-change="handleSelectionChange">
	<el-table-column type="selection" width="30">
	</el-table-column>
	<el-table-column prop="measureTime" label="MeasureTime" min-width="120">
	</el-table-column>
	<el-table-column prop="line" label="Line" min-width="60">
	</el-table-column>
	<el-table-column prop="series" label="Car Model" min-width="100">
	</el-table-column>
	<el-table-column prop="color" label="Color" min-width="100">
	</el-table-column>
	<el-table-column prop="igefNo" label="IGEF" min-width="100">
	</el-table-column>
	<el-table-column prop="updateBy" min-width="120" label="Update BY">
	</el-table-column>
	<el-table-column prop="updateTime" min-width="120" label="Update Time">
	</el-table-column>
</el-table>

js代码：

multipleSelection: null //data中记录选中值

handleSelectionChange(selection) {
        if (selection.length > 1) {
            // 清空所有选中
            this.$refs.singleTable.clearSelection();
            this.$refs.singleTable.toggleRowSelection(selection.pop());
        } else {
            this.multipleSelection = selection.pop();
        }
    }