element table radio 单选表格实现

实际效果可以自行复制下面代码查看
后续可以自己封装成 table 组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"><title>element-ui单选表格行</title><meta name="description" content="test"><meta name="Keywords" content="test"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><style type="text/css"></style>
</head><body><div id="app"><el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="showRow" @current-change="handleCurrentChange" highlight-current-row ><el-table-column width="50"><template slot-scope="scope"><el-radio v-model="radio" :label="scope.$index">&nbsp;</el-radio></template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="mobileNumber" label="电话号码" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script type="text/javascript">let vm = new Vue({el: '#app',data() {return {radio: '',tableData: [{radioId: '0',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '1',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '2',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '3',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '4',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '5',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '6',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}]}},methods: {showRow(row) {//赋值给radiothis.radio = this.tableData.indexOf(row)console.log(this.tableData.indexOf(row))},getCurrentRow(val) {console.log(val)},handleCurrentChange(currentRow, oldCurrentRow){console.log(currentRow)this.currentRow = currentRowthis.getCurrentRow(this.tableData.indexOf(currentRow))}}});</script>
</body></html>

element table radio 单选表格实现相关推荐

element table多选表格_关于layui表格obj.update();无法重渲模板引擎问题
因为框架自身问题:obj.update();不支持:顾只能重新渲染: 表单页面是后台直接返给的:代码中运用了java的字典:变量:等一些列JSP: 我这里的主要问题是:后台需要分开的时间范围:star ...
element table多选表格_【经验总结】vue + element-ui 踩坑—— table 篇
工作一年,主要职责是负责公司后台管理平台的开发与维护.此间面对各种业务需求,通过面向谷歌编程等常见方式,积累了一些微不足道的经验. 本篇为总结的第一篇(也许有其他篇)-- table 篇对于后台管理 ...
element table 表头固定,表格高度自适应
//通过 :height="tableHeight" 设置 <el-table>:height="tableHeight"ref="mul ...
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...

element table radio 单选表格实现

element table radio 单选表格实现相关推荐

最新文章

热门文章