您现在的位置是：网站首页> 编程资料编程资料

关于ElementUI自定义Table支持render_vue.js_

2023-05-24 559人已围观

简介 关于ElementUI自定义Table支持render_vue.js_

ElementUI自定义Table支持render

ElementUI中的Table组件可以通过render-header属性通过render函数渲染表头，对于数据单元格并没有相关支持，虽然可以通过自定义列，但是在某些操作中直接用·render·形式进行渲染会更加有效，我一般喜欢通过数据的形式配置表格的内容，所以对ElementUI中的Table组件进行二次封装。

首先编写用于表头和数据单元格的部分：

TableHeaderCell.js

export default {   name: 'TableHeadCell',   functional: true,   props: {     render: Function,     index: Number,     column: Object,     scopeColumn: Object,     columns: Array,     data: Array   },   render: (h, ctx) => {     if (typeof ctx.props.render === 'function') {       const params = {         index: ctx.props.index,         column: ctx.props.column,         scopeColumn: ctx.props.scopeColumn,         columns: ctx.props.columns,         data: ctx.props.data,         _self: ctx       }       return ctx.props.render.call(ctx.parent.$parent, h, params)     } else {       return h('span', ctx.props.column.label || ctx.props.column.prop || ctx.props.scopeColumn.property)     }   } }

TableCell.js

export default {   name: 'TableCell',   functional: true,   props: {     row: Object,     render: Function,     index: Number,     column: Object,     scopeColumn: Object,     columns: Array,     data: Array   },   render: (h, ctx) => {     if (typeof ctx.props.render === 'function') {       const params = {         row: ctx.props.row,         index: ctx.props.index,         column: ctx.props.column,         scopeColumn: ctx.props.scopeColumn,         columns: ctx.props.columns,         data: ctx.props.data,         _self: ctx       }       return ctx.props.render.call(ctx.parent.$parent, h, params)     } else {       if (typeof ctx.props.column.formatter === 'function') {         return h('span',            ctx.props.column.formatter(             ctx.props.row, ctx.props.scopeColumn,             ctx.props.row[ctx.props.column.prop],             ctx.props.index           )         )       }       return h('span', ctx.props.row[ctx.props.column.prop])     }   } }

最后编写表格主要部分：index.vue

使用示例：

ElementUI-Table表头排序

ElementUI-Table表头自带排序功能，和排序事件，但是目前只是对当前界面的数据进行排序。

  • 项目需求：点击表头排序的时候，对所有数据进行排序。
  • 初步方案：在点击排序按钮的时，在排序事件sort-change 中，进行数据请求，此时会先重拍一次当前页面的数据，再渲染接口返回数据。用户体验不是很好。
  • 优化方案：使用render-header自定义tableHeader，此时要使用render函数来创建表头。
getheaderTime(h) {       const This = this       return h('div', {       },         ['告警时间',           h('span', {             class: 'iline-table-sort'           },             [               h('i', {                 'class': {                   'el-icon-caret-bottom': This.orderByType === 'desc',                   'el-icon-caret-top': This.orderByType === 'asc',                   'active': This.orderBy === 'daqTime'                 },                 attrs: {                   'orderByType': 'desc',                   'orderType': 'daqTime'                 },                 on: {                   click: This.clickHandler                 },                 style: {                   fontSize: '22px'                 }               })             ]           )         ])     }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue添加vue-awesome-swiper轮播组件方式_vue.js_

下一篇：vue-cli的index.html中使用环境变量方式_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网