el-table中实现单选按钮

Vue 同时被 2 个专栏收录
25 篇文章 0 订阅
11 篇文章 0 订阅

其实element本身是有提供单选这个功能的,只是效果不太明显…用色块表示…
在这里插入图片描述
我比较俗…喜欢这种直截了当一眼就知道我选中它了的…
在这里插入图片描述
所以就结合它本身的单选功能和el-radio拼一拼…
上菜…哦不…上码

 <el-table max-height="300" :data="list" highlight-current-row @row-click="rowClick">
 	<el-table-column label width="35">
    	<template slot-scope="scope">
        	<el-radio :label="scope.row.name" v-model="radioId">&nbsp;</el-radio>
        </template>
    </el-table-column>
    <el-table-column label="序号" width="120" prop="account"></el-table-column>
    <el-table-column label="照片" width="100">
    	<template slot-scope="scope">
        	<img class="img-url" :src="scope.row.url" alt="">
       	</template>
    </el-table-column>
    <el-table-column label="姓名" width="100" prop="name"></el-table-column>
    <el-table-column label="性别" width="100" prop="sex"></el-table-column>
    <el-table-column label="部门" width="100" prop="department"></el-table-column>
    <el-table-column label="岗位" width="100" prop="job"></el-table-column>
</el-table>
<script>
	export default{
		methods:{
			rowClick(row){
				this.radioId=row.name;
			}
		}
	}
</script>

在这里插入图片描述
PS:因为前面虽然加了单选按钮,但是只要点击单选按钮才会选中,而如果点击的是这一行的其它地方,是不会选中单选按钮的,但是el-table有个选中行的点击事件@row-click,在这里借助它,当点击行的时候选中单选按钮。

今天天气不错哈哈,祝开心摸鱼。

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

Muizai

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值