el-table单选2

<template>
	<el-table
		ref="singleTable"
		:data="tableData"
		tooltip-effect="dark"
		style="width: 100%"
		@select="rowSelect"
	>
		<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>
</template>

<script>
export default {
	name: 'singleTable',
	data() {
		return {
			tableData: [
				{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}
			],
		};
	},
	
	methods: {
		rowSelect(selection, row) {
			this.$refs.singleTable.clearSelection();
			if (selection.length == 0) return;
			this.$refs.singleTable.toggleRowSelection(row, true);
		},
		
	}
};
</script>
<style scoped lang="scss">
//隐藏全选
/deep/ .el-table-column--selection.is-leaf {
	.el-checkbox {
		display: none;
	}
}
</style>
posted @   Code_Lzh  阅读(3)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示