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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
javascript中的this详解
Dec 08 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php 接口类与抽象类的实际作用
2009/11/26 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
js控制淡入淡出示例代码
2013/11/12 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
Vue中props的详解
2019/05/16 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python脚本替换指定行实现步骤
2017/07/11 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python pip使用超时问题解决方案
2020/08/03 Python
用Python制作音乐海报
2021/01/26 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
高级Java程序员面试题
2016/06/23 面试题
护理学毕业生自荐信
2013/10/02 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
求职自荐信的格式
2014/04/07 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
董事长年会致辞
2015/07/29 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python