您现在的位置是:网站首页> 编程资料编程资料

element table 表格控件实现单选功能_vue.js_

2023-05-24 354人已围观

简介 element table 表格控件实现单选功能_vue.js_

项目中实现 table 表格控件单选功能,如图:

基本代码如下:

1、template 代码中:

注意:

 

这里写   的目的是为了页面不显示内容,只显示单选操作

2、data 代码中:

data() { return { templateSelection: '', // 返回数据 tableData: [ { 'id': 1, 'title': '嘿嘿嘿', 'priority': '高', 'state': 1, 'dealingPeople': '小龙女' }, { 'id': 2, 'title': '嘻嘻嘻', 'priority': '中', 'state': 2, 'dealingPeople': '小龙女' }, { 'id': 3, 'title': '哈哈哈', 'priority': '低', 'state': 3, 'dealingPeople': '小龙女' }, { 'id': 3, 'title': '哈哈哈', 'priority': '低', 'state': 3, 'dealingPeople': '小龙女' }, { 'id': 3, 'title': '哈哈哈', 'priority': '低', 'state': 3, 'dealingPeople': '小龙女' }, { 'id': 3, 'title': '哈哈哈', 'priority': '低', 'state': 3, 'dealingPeople': '小龙女' } ] } }

3、methods 代码中:

singleElection (row) { this.templateSelection = this.tableData.indexOf(row); this.templateRadio = row.id; },

到此这篇关于element table 表格控件实现单选功能的文章就介绍到这了,更多相关element table 表格单选内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

-六神源码网