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


Posted in Javascript onJune 18, 2020

我们知道有很多系统都要求表格中添加各种各样的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',
  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标签使用插槽

就是最后一列这样子啦!

到此这篇关于vue+element-ui表格封装tag标签使用插槽的文章就介绍到这了,更多相关vue element表格封装tag内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript搜索框效果实现方法
May 14 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
js实现ajax的用户简单登入功能
Jun 18 #Javascript
JS实现躲避粒子小游戏
Jun 18 #Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
You might like
php 数组二分法查找函数代码
2010/02/16 PHP
php学习笔记之 函数声明
2011/06/09 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
浅谈php命令行用法
2015/02/04 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
基于python实现文件加密功能
2020/01/06 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
工程师自我评价怎么写
2013/09/19 职场文书
捐款倡议书范文
2014/02/02 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
营销总监岗位职责
2014/09/16 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
中秋客户感谢信
2015/01/22 职场文书
杨善洲电影观后感
2015/06/04 职场文书
遗嘱范文
2015/08/07 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python