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

插槽

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

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

element-table获取行信息

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

<template slot-scope="scope" ></template>

• scope.$index 获取索引
• scope.row 获取当前行（object）

利用插槽

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

在table组件中

<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组件的父组件中

<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"     } ],复制代码

呈现效果

就是最后一列这样子啦！

推荐教程：《JS教程》

以上就是vue+element-ui表格封装tag使用slot插槽标签的详细内容，更多内容请关注技术你好其它相关文章！