element里面的表格单选操作

最新推荐文章于 2024-04-17 03:44:28 发布

丹丹的小跟班

最新推荐文章于 2024-04-17 03:44:28 发布

阅读量1.3k

点赞数

分类专栏： vue elementUi 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_44473483/article/details/122236361

版权

vue 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

elementUi

7 篇文章 0 订阅

订阅专栏

element里面的表格在日常开发中使用频繁，他的多选功能也是他的一大特点，但是我们有时候也会有单选的需求。

解决方法1

最简单的方法莫过于直接判断选中的数量，大于1则进行消息提示且阻断后续操作，这是最常用的方法，但是用于体验来讲可能相对较低，用户需要进行重复操作来了解规则。

解决方法2

我们还有一种种更理想化的方法，就是不适用组件自带的多选按钮，而是使用单选按钮进行替换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" border>
				<el-table-column prop="name" width="180">
					<template #default={row}>
						<el-radio v-model="radioValue" @change="radioChange(row)" :label="row.id">&nbsp;</el-radio>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="name" label="年龄" width="180"></el-table-column>
			</el-table>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						tableData: [
							{id: 1, name: 'fufu', age: 20},
							{id: 2, name: 'dandan', age: 20},
							{id: 3, name: 'weiwei', age: 20},
							{id: 4, name: 'lili', age: 20},
							{id: 5, name: 'zhouzhou', age: 20},
							{id: 6, name: 'huahua', age: 20},
							{id: 7, name: 'yuanyuan', age: 20}
						],
						selectObj: {},
						radioValue: null
					}
				},
				methods:{
					radioChange(row) {
						this.selectObj = row
					}
				}
			})
		</script>
	</body>
</html>