element里面的表格单选操作

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"> 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/[email protected]/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>

这样一个优雅又对用户体验良好的单选表格就ok。

你可能感兴趣的:(vue,elementUi,elementui,vue.js,前端)