vue+element-ui表格封装tag使用slot插槽标签

我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性。在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。

插槽

省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这个子组件的时候,可以自定义这个占位符所占地方呈现的样子,可能是一个标题,一个按钮,甚至一个表格,一个表单。

为什么要插槽呢?我们抽离组件的原因就是因为可重复的代码太多了,当使用可复用的组件时,大大减少了复制粘贴。设想有两个组件,他们两个大部分都相同,只有某一个地方不同,这个时候为了这个地方而做别的部分的重复就完全没有必要。当有了插槽之后,我们可以把这两个组件的共同部分提取出来,然后把其中不同的那一个部分用一个插槽代替,之后调用的时候,只去写这一个部分的代码就好。这样就符合了我们组件化的思想,也少了很多工作。

element-table获取行信息

在中,使用slot-scope,可以获得当前行的信息


登录后复制scope.$index 获取索引scope.row 获取当前行(object)

利用插槽

在表格数据中,对于要呈现标签的一个属性添加tag:true,当循环的时候,遇到设置了tag的属性,就会进到这个插槽中,调用这个组件的父组件就可以自定义标签列要呈现的内容

立即学习“前端免费学习笔记(深入)”;

在table组件中

{{scope.row[item.prop]}}

登录后复制

怎么循环的内容和标题就是上面代码所示

在引用table组件的父组件中

            tag1                tag2                tag3            

登录后复制

表格使用的数据

table_title

[  {    prop: 'id',    label: '编号',    width: '100',    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },  {    prop: 'date',    label: '日期',    width: '150',    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },  {    prop: 'name',    label: '姓名',    width: '120',    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },  {    prop: 'province',    label: '省份',    minwidth: '120',    titleAlign: 'center',    columnAlign: 'center',    sortable:true,    isEdit: true  },  {    prop: 'city',    label: '市区',    minwidth: '120',    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },  {    prop: 'address',    label: '地址',    minwidth: '300',    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },  {    prop: 'auditflag',    label: '状态',    minwidth: '80px',    tag: true,    titleAlign: 'center',    columnAlign: 'center',    sortable:true  },];

登录后复制

listData

 [    {        id: 1,        date: '2016-05-02',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1518 弄',        zip: 200333,        tag: "1"    }, {        id: 2,        date: '2016-05-04',        name: '王小',        province: '北京',        city: '普陀区',        address: '上海市普陀区金沙江路 1517 弄',        zip: 200333,        tag: "2"    }, {        id: 3,        date: '2016-05-01',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1519 弄',        zip: 200333,        tag: "3"    }, {        id: 4,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "1"    }, {        id: 5,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "2"    }, {        id: 6,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "3"    }, {        id: 7,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "1"    }, {        id: 8,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "2"    }, {        id: 9,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "3"    }, {        id: 10,        date: '2016-05-03',        name: '王小虎',        province: '上海',        city: '普陀区',        address: '上海市普陀区金沙江路 1516 弄',        zip: 200333,        tag: "1"    }],复制代码

登录后复制

呈现效果

vue+element-ui表格封装tag使用slot插槽标签

就是最后一列这样子啦!

推荐教程:《JS教程》

以上就是vue+element-ui表格封装tag使用slot插槽标签的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2955914.html

(0)
上一篇 2025年3月12日 00:22:17
下一篇 2025年3月12日 00:22:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论