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 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
JavaScript实现图片轮播特效
Oct 23 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php微信开发之谷歌测距
2018/06/14 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
Jquery性能优化详解
2014/05/15 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
JavaScript的一些小技巧分享
2021/01/06 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python版本单链表实现代码
2018/09/28 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
采购内勤岗位职责
2015/04/13 职场文书
祝酒词范文
2015/08/12 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书