vue中插槽slot的使用方法

我們知道有很多系統(tǒng)都要求表格中添加各種各樣的tag，來(lái)標(biāo)記一些屬性。在element-ui中添加tag很簡(jiǎn)單，最重要的就是用到了vue的插槽slot這個(gè)特性。首先了解什么是插槽。

插槽

省去官方的復(fù)雜講解和代碼，插槽的意思簡(jiǎn)單來(lái)說(shuō)，就是在子組件的某個(gè)地方留一個(gè)占位符，當(dāng)父組件使用這個(gè)子組件的時(shí)候，可以自定義這個(gè)占位符所占地方呈現(xiàn)的樣子，可能是一個(gè)標(biāo)題，一個(gè)按鈕，甚至一個(gè)表格，一個(gè)表單。

為什么要插槽呢？我們抽離組件的原因就是因?yàn)榭芍貜?fù)的代碼太多了，當(dāng)使用可復(fù)用的組件時(shí)，大大減少了復(fù)制粘貼。設(shè)想有兩個(gè)組件，他們兩個(gè)大部分都相同，只有某一個(gè)地方不同，這個(gè)時(shí)候?yàn)榱诉@個(gè)地方而做別的部分的重復(fù)就完全沒(méi)有必要。當(dāng)有了插槽之后，我們可以把這兩個(gè)組件的共同部分提取出來(lái)，然后把其中不同的那一個(gè)部分用一個(gè)插槽代替，之后調(diào)用的時(shí)候，只去寫這一個(gè)部分的代碼就好。這樣就符合了我們組件化的思想，也少了很多工作。

element-table獲取行信息

在中，使用slot-scope，可以獲得當(dāng)前行的信息

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

• scope.$index 獲取索引
• scope.row 獲取當(dāng)前行（object）

利用插槽

在表格數(shù)據(jù)中，對(duì)于要呈現(xiàn)標(biāo)簽的一個(gè)屬性添加tag:true，當(dāng)循環(huán)<el-table-column>的時(shí)候，遇到設(shè)置了tag的屬性，就會(huì)進(jìn)到這個(gè)插槽中，調(diào)用這個(gè)組件的父組件就可以自定義標(biāo)簽列要呈現(xiàn)的內(nèi)容

在table組件中

<p class="table-content">
    <el-table
        :data="list"
        class="mt-10"
        fit
        stripe
        empty-text="暫無(wú)數(shù)據(jù)"
        :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>

怎么循環(huán)<el-table>的內(nèi)容和標(biāo)題就是上面代碼所示

在引用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>

表格使用的數(shù)據(jù)

table_title

[
  {
    prop: 'id',
    label: '編號(hào)',
    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: '市區(qū)',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'address',
    label: '地址',
    minwidth: '300',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'auditflag',
    label: '狀態(tài)',
    minwidth: '80px',
    tag: true,
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
];

listData

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

以上就是vue+element-ui表格封裝tag使用slot插槽標(biāo)簽的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！