我們知道有很多系統都要求表格中新增各種各樣的tag，來標記一些屬性。在element-ui中新增tag很簡單，最重要的就是用到了vue的插槽slot這個特性。首先了解什麼是插槽。

插槽

省去官方的複雜講解和程式碼，插槽的意思簡單來說，就是在子元件的某個地方留一個佔位符，當父元件使用這個子元件的時候，可以自定義這個佔位符所佔地方呈現的樣子，可能是一個標題，一個按鈕，甚至一個表格，一個表單。
為什麼要插槽呢？我們抽離元件的原因就是因為可重複的程式碼太多了，當使用可複用的元件時，大大減少了複製貼上。設想有兩個元件，他們兩個大部分都相同，只有某一個地方不同，這個時候為了這個地方而做別的部分的重複就完全沒有必要。當有了插槽之後，我們可以把這兩個元件的共同部分提取出來，然後把其中不同的那一個部分用一個插槽代替，之後呼叫的時候，只去寫這一個部分的程式碼就好。這樣就符合了我們元件化的思想，也少了很多工作。

element-table獲取行資訊

在中，使用slot-scope，可以獲得當前行的資訊

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

• scope.$index 獲取索引
• scope.row 獲取當前行（object）

利用插槽

在表格資料中，對於要呈現標籤的一個屬性新增tag:true，當迴圈<el-table-column>的時候，遇到設定了tag的屬性，就會進到這個插槽中，呼叫這個元件的父元件就可以自定義標籤列要呈現的內容

在table元件中

<div 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>
</div>

怎麼迴圈<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',{
  prop: 'name',label: '姓名',width: '120',{
  prop: 'province',label: '省份',minwidth: '120',sortable:true,isEdit: true
 },{
  prop: 'city',label: '市區',{
  prop: 'address',label: '地址',minwidth: '300',{
  prop: 'auditflag',label: '狀態',minwidth: '80px',tag: 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: '北京',address: '上海市普陀區金沙江路 1517 弄',tag: "2"
  },{
    id: 3,date: '2016-05-01',address: '上海市普陀區金沙江路 1519 弄',tag: "3"
  },{
    id: 4,date: '2016-05-03',address: '上海市普陀區金沙江路 1516 弄',{
    id: 5,{
    id: 6,{
    id: 7,{
    id: 8,{
    id: 9,{
    id: 10,tag: "1"
  }
],

呈現效果

就是最後一列這樣子啦！

到此這篇關於vue+element-ui表格封裝tag標籤使用插槽的文章就介紹到這了,更多相關vue element表格封裝tag內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！