table实现radio单选效果

<el-dialog
title="邀请三方授权"
:visible.sync="thirdAuthorized"
width="50%">
<el-input v-model="searchContent" placeholder="请输入搜索内容"></el-input>
<el-button size="small" >搜索</el-button>
<el-table :data="tableData" style="width: 100%" highlight-current-row @row-click='singleElection($event)'>
<el-table-column align="center" label="选项">
<template slot-scope="scope">
<el-radio v-model="templateSelection" :label="scope.$index">
<span></span>
</el-radio>
</template>
</el-table-column>
<el-table-column align="center" prop="agentName" label="坐席姓名"></el-table-column>
<el-table-column align="center" prop="agentCode" label="坐席工号" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="skillGroup" label="技能组" show-overflow-tooltip></el-table-column>
</el-table>
<div class="btns">
<el-button @click="closeThirdDia">取消</el-button>
<el-button type="primary" @click="inviteThird">邀请</el-button>
</div>
</el-dialog>

thirdAuthorized:false,//邀请三方授权弹窗
templateSelection:'',//控制坐席选择
selectTableValue:'', //选中的表格坐席
searchContent:'', //搜索内容
tableData:[
{
agentName:'张三',
agentCode:'001',
skillGroup:'储蓄卡'
},
{
agentName:'李四',
agentCode:'002',
skillGroup:'信用卡'
},
{
agentName:'王五',
agentCode:'003',
skillGroup:'贵金属'
}
], //三方坐席表格数据

//关闭三方弹窗
closeThirdDia(){
this.thirdAuthorized=false
},
//坐席数据选择
singleElection(row){
console.log(row,'打印行数据');
this.templateSelection=this.tableData.indexOf(row)
this.selectTableValue=row
},
//邀请三方
inviteThird(){
if(!this.selectTableValue){
this.$message.error('请选择一个坐席')
}else{

}
},

table实现radio单选效果相关推荐

element-ui的table表格实现单选效果
效果图安装Element-ui npm i element-ui -S 引入 Element-ui 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import ...
单选框加了css后显示不出来,layui radio 单选框效果显示不来解决方法
$("input[name=sex][value=女]").attr("checked", data.data.adminInfoEntity.adminInf ...
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
html 单选打勾效果,checkbox 实现单选效果（html）
note:在html 标签类中的checkbox实现单选效果. 在最近的开发项目中,客户要求使用小方格子实现"单选"功能,显然圆点的radio被out了,只能选择chckbox的方 ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
【MFC】工具栏按钮单选效果
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述 Visual C++在 ...
flutter Radio 单选框
Radio 单选框目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1]点击查看提示 [x2]各种系列的教程 [x3]Flutter文章积累目录 1 flutter ...
ReactNative 自定义封装Radio单选组件
Radio单选框 1.功能说明用于在多个备选项中选中单个状态. Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多 2.组件效果 3.代码演示 import React, { Co ...
微信小程序radio单选框
微信小程序radio单选框效果: 选中男返回male,选中女返回female wxml: <radio-group bindchange="handlechange"> ...
html radio vue,vue radio单选框,获取当前项(每一项)的value值操作
前言本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以 1.使用v-for循环的radio单选框 01)需要注意的是,这是使用的是 chan ...

table实现radio单选效果

table实现radio单选效果相关推荐

最新文章

热门文章