element-ui el-table复选框禁止选中

最新推荐文章于 2024-08-10 09:11:51 发布

奋斗的蜗牛，奔跑吧

最新推荐文章于 2024-08-10 09:11:51 发布

阅读量996

点赞数

分类专栏： element vue 文章标签： elementui 前端 vue

本文链接：https://blog.csdn.net/weixin_42666837/article/details/124821476

版权

vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

这是一个关于Vue.js的表格组件使用示例，展示了如何实现多选、数据展示和筛选功能。代码中定义了表格数据，并提供了选择列、日期列、姓名列和年龄列。`handleSelectionChange`函数用于处理选中行的变化，`checkSelectable`方法用于限制选择条件。这个例子对于理解Vue.js中的数据绑定和事件处理非常有帮助。

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

<template>
	<div>
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" :selectable="checkSelectable">
			</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="age" label="年龄" width="120">
			</el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [{
				age: 1,
				date: '2016-05-03',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				age: 222333332,
				date: '2016-05-02',
				name: '孙小虎',
				address: '花果山'
			}, {
				age: 32,
				date: '2016-05-04',
				name: '无名',
				address: '南海'
			}, {
				age: 4,
				date: '2016-05-01',
				name: '李小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				age: 5,
				date: '2016-05-08',
				name: '小老虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				age: 6,
				date: '2016-05-06',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				age: 7,
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}],
			multipleSelection: []
		}
	},

	methods: {
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},

		checkSelectable(row) {
			if (row.age > 999) {
				return false
			}
			return true
			// if (this.status == 0) {
			// 	return true
			// } else {
			// 	return false
			// }
		}
	}
}
</script>