作者：唐进单 | 来源：互联网 | 2023-09-06 05:30
element里面的表格在日常开发中使用频繁，他的多选功能也是他的一大特点，但是我们有时候也会有单选的需求。
解决方法1
最简单的方法莫过于直接判断选中的数量，大于1则进行消息提示且阻断后续操作，这是最常用的方法，但是用于体验来讲可能相对较低，用户需要进行重复操作来了解规则。
解决方法2
我们还有一种种更理想化的方法，就是不适用组件自带的多选按钮，而是使用单选按钮进行替换。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="token punctuation">">
<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/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>
这样一个优雅又对用户体验良好的单选表格就ok。
京公网安备 11010802041100号