欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+element-ui表格封裝tag標(biāo)簽使用插槽

 更新時(shí)間:2020年06月18日 16:27:37   作者:qqcr  
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們知道有很多系統(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í)候,只去寫(xiě)這一個(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組件中

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

怎么循環(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"
  }
],

呈現(xiàn)效果

就是最后一列這樣子啦!

到此這篇關(guān)于vue+element-ui表格封裝tag標(biāo)簽使用插槽的文章就介紹到這了,更多相關(guān)vue element表格封裝tag內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue監(jiān)視數(shù)據(jù)的原理詳解

    Vue監(jiān)視數(shù)據(jù)的原理詳解

    這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02
  • vue2.0 datepicker使用方法

    vue2.0 datepicker使用方法

    這篇文章主要介紹了vue2.0 datepicker的使用方法,非常不錯(cuò),具有參考借鑒借鑒價(jià)值,需要的朋友參考下
    2018-02-02
  • 詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn)

    詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn)

    這篇文章主要介紹了詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)

    詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)

    最近在用vue做移動(dòng)端項(xiàng)目,網(wǎng)上找了一些移動(dòng)端適配的方案,個(gè)人覺(jué)得手淘團(tuán)隊(duì)flexible.js還是比較容易上手,在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
    2019-04-04
  • Vue使用Element-UI生成并展示表頭序號(hào)的方法

    Vue使用Element-UI生成并展示表頭序號(hào)的方法

    序號(hào)算是在展示數(shù)據(jù)的時(shí)候,一種很普遍的屬性了,我們可以自己寫(xiě)生成序號(hào)的規(guī)則,也可以借助第三方,這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號(hào)的方法,需要的朋友可以參考下
    2023-01-01
  • vue使用mui遇到的坑及解決

    vue使用mui遇到的坑及解決

    這篇文章主要介紹了vue使用mui遇到的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • element-ui 限制日期選擇的方法(datepicker)

    element-ui 限制日期選擇的方法(datepicker)

    本篇文章主要介紹了element-ui 限制日期選擇的方法(datepicker),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • vue interceptor 使用教程實(shí)例詳解

    vue interceptor 使用教程實(shí)例詳解

    本文通過(guò)實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下
    2018-09-09
  • vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼

    vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼

    這篇文章主要介紹了vuejs-手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • vue和uniapp頁(yè)面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部

    vue和uniapp頁(yè)面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部

    這篇文章主要介紹了vue和uniapp頁(yè)面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05

最新評(píng)論