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 @ 2024-08-05 11:33  Code_Lzh  阅读(14)  评论(0)    收藏  举报