element-ui table组件如何使用render属性的实现


Posted in Javascript onNovember 04, 2019

前言

起因:

在使用 element-ui table组件时,由于表列比较多一个个写特别麻烦,所以想通过将所有表头定义成一个数组,通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。

障碍:

类似于下面自定义表列的样式,它是通过 slot-scope 去覆盖 el-table-column 内部slot的样式实现的。那我们在遍历表头数组的时候如何实现呢?

element-ui table组件如何使用render属性的实现

参考:

用过 react 开发会经常用到 ant design ,其中它的 table 组件是可以接受 render属性的,下面使用table组件时,只需要定义好,columns(表头列) data(表的具体数据)即可。整体看起来很简洁 去渲染自定义的组件的。 点击查看 antdesign

demo:

codepen demo地址

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 render: (text, row, index) => {
  if (index < 4) {
  return <a>{text}</a>;
  }
  return {
  children: <a>{text}</a>,
  props: {
   colSpan: 5,
  },
  };
 },
 }]
 const const data = [
 {
 key: '1',
 name: 'John Brown',
 age: 32,
 tel: '0571-22098909',
 phone: 18889898989,
 address: 'New York No. 1 Lake Park',
 }]
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);

在 Vue 中实现 render 属性

接下来我们要实现下图的table的样式,但是这一次我们采用 render 传参数的方式

element-ui table组件如何使用render属性的实现 

思路

  1. 父组件将需要渲染的列表通过 props 传递给子组件
  2. 子组件使用 slot 并填充默认渲染的 el-table-column 方式为 prop 渲染 data 中传递的值
  3. 子组件通过 slot 将值传回给父组件,父组件通过 slot-scope 接受到子组件的值,判断该项是否有 render 属性,有的话在组件标签添加 render 属性返回的 html 去覆盖 slot 中默认的值。

子组件定义默认值

有了上面的思路,去实现子组件。我们需要知道一点,每个 el-table-column 只是定义了一列的表头和数据,而 :data="tableList" 中的每项值是定义了一行的数据。所以 el-table-column 是按列来分,data 是按行来分

  • 通过props 去接受表头列表,数据列表
  • 遍历表头数据,并且将 el-table-column 作为默认数据,使用 slot 包裹起来
  • 通过 slot 想父组件传递当前项的数据
<template>
 <el-table :data="tableList" style="width:500px">
  <template v-for="item in propList">
  <slot :content="item">
   <el-table-column :key="item.id" :prop="item.prop" :label="item.label"></el-table-column>
  </slot>
  </template>
 </el-table>
</template>
<script>
 export default {
  props:{
   propList:{
   type:Array,
   default:()=>[]
   },
   tableList:{
   type:Array,
   default:()=>[]
   },
  }
 }
</script>

父组件定义

父组件通过 slot-scope 来接受到子组件传递过来的数据,然后判断是否有 render 属性来确定是否用要去自定义样式覆盖默认的 slot

  • 首先看传递给子组件的表头数据,可以看到,第二,三行列表中有一个render属性,它是一个函数并返回一个 html 的字符串。
  • tableList就是普通的数据,也就是数据的 key 值去渲染对应的数据
  • 图片这列举例子,当父组件通过 props 将 {label,prop,id,render} 传递给子组件后,子组件有通过 slot 将值传递回父组件。
    • 到这里有些人会有疑问,为什么要将数据这样传来传去,因为我们在子组件中定义好了默认样式,而父组件中需要判断该值是否需要自定义样式,去覆盖子组件中的样式。
    • 这些自定义样式就是一开始,在render函数中返回的 html 字符串
    • 为啥 React 直接返回 jsx ,而Vue需要返回 html 字符串,因为react本身就是使用 JSX 来渲染模版的,最终都会通过 babel 编译成 React.createElement ,而Vue是通过 template 来渲染模版的,这里通过定义 template 模版字符串,最终通过 v-html 来解析
  • 为什么这里有两个 slot-scope ,第一个是 slot-item 的,组件内部通过 slot-scope 将值传递出来。而第二个是 el-table-item 的,ui组件内部同样将数据通过 slot-scope 传递传来。
  • 通过第一个 slot-scope 拿到 propList 中的定义的 render 函数,通过第二个 slot-scope 拿到 table 组件内部传递出来的数据,将数据传递给 render 函数去生成自定义模版

最终通过 v-html 去解析生成的字符串模版

<slot-item :propList="propList" :tableList="tableList">
 <template slot-scope="{content}" v-if="content.render">
  <el-table-column :label="content.label">
   <template slot-scope="{$index,row}">
    <div v-html="content.render(row)"></div>
   </template>
  </el-table-column>
 </template>
</slot-item>
 export default {
  components:{
   SlotItem
  },
  data () {
   return { 
    propList:[
     {label:'姓名',prop:'name',id:1},
     {label:'图片',prop:'pic',id:2,render:({pic})=>{
      return `<img style="width:30px;height:30px" src='${pic}' />`
     }},
     {label:'操作',prop:'operate',id:3,render:({text})=>{
      return `<div style="color:#999">${text}</div>`
     }},
    ],
    tableList:[
     {name:'章三',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png',text:'新增'},
     {name:'里斯',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png',text:'删除'},
     {name:'网舞',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png',text:'跳转'},
    ]
   }
  }
 }
</script>

结尾

有了render属性,可以想 ant-design 那样简洁的属性 ui组件模版了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 无刷新分页实例代码
Nov 12 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
ECMAScript6--解构
Mar 30 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
Laravel日志用法详解
2016/10/09 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python计算回文数的方法
2015/03/11 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python函数参数操作详解
2018/08/03 Python
python下载微信公众号相关文章
2019/02/26 Python
python实现邮件自动发送
2019/08/10 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python Django路径配置实现过程解析
2020/11/05 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
小学教师岗位职责
2013/11/25 职场文书
最新党员思想汇报
2014/01/01 职场文书
出纳员岗位责任制
2014/02/11 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
农村党支部承诺书
2015/04/30 职场文书
导游词之西安大清真寺
2019/12/17 职场文书