我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性。在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。
省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这个子组件的时候,可以自定义这个占位符所占地方呈现的样子,可能是一个标题,一个按钮,甚至一个表格,一个表单。
为什么要插槽呢?我们抽离组件的原因就是因为可重复的代码太多了,当使用可复用的组件时,大大减少了复制粘贴。设想有两个组件,他们两个大部分都相同,只有某一个地方不同,这个时候为了这个地方而做别的部分的重复就完全没有必要。当有了插槽之后,我们可以把这两个组件的共同部分提取出来,然后把其中不同的那一个部分用一个插槽代替,之后调用的时候,只去写这一个部分的代码就好。这样就符合了我们组件化的思想,也少了很多工作。
在中,使用slot-scope
,可以获得当前行的信息
<template slot-scope="scope" ></template>
scope.$index
获取索引scope.row
获取当前行(object)在表格数据中,对于要呈现标签的一个属性添加tag:true
,当循环<el-table-column>
的时候,遇到设置了tag
的属性,就会进到这个插槽中,调用这个组件的父组件就可以自定义标签列要呈现的内容
<p class="table-content"> <el-table :data="list" class="mt-10" fit stripe empty-text="暂无数据" :highlight-current-row="true" > <el-table-column v-for="(item, index) in table_title" :key="index" :prop="item.prop" :label="item.label" :width="item.width?item.width:null" :min-width="item.minwidth?item.minwidth:null" :sortable="item.sortable?item.sortable:false" :align="item.columnAlign" :header-align="item.titleAlign" > <template slot-scope="scope"> <template v-if="item.tag"> <slot name="tags" :scope="scope.row"></slot> </template> <span v-else>{{scope.row[item.prop]}}</span> </template> </el-table-column> </el-table> </p>
怎么循环<el-table>
的内容和标题就是上面代码所示
<table-page :list="listData" :table_title="table_title"> <template v-slot:tags="scope"> <el-tag v-if="scope.scope.tag == 1" size="small" type="primary" >tag1 </el-tag> <el-tag v-else-if="scope.scope.tag == 2" size="small" type="warning" >tag2 </el-tag> <el-tag v-else-if="scope.scope.tag == 3" size="small" type="success" >tag3 </el-tag> </template> </table-page>
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插槽标签的详细内容,更多请关注亿速云其它相关文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。