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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
JQuery学习总结【二】
Dec 01 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
小程序server请求微信服务器超时的解决方法
May 21 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 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
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
splice slice区别
2006/10/09 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
js创建数组的简单方法
2016/07/27 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python实现维吉尼亚加密法
2019/03/20 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
初婚未育未抱养证明
2014/01/12 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python