锐客网

  1. 首页 > 睿知 > it技术 > >

vue|vue elementui二次封装el-table带插槽问题

目录

  • elementui二次封装el-table带插槽
  • element-ui table组件的二次封装(插槽的形式)
    • 1.外层table组件封装
    • 2.内层table组件代码

elementui二次封装el-table带插槽 【vue|vue elementui二次封装el-table带插槽问题】子组件table封装 html部分

js部分

在父组件中使用 html 代码

js代码部分

这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。
通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。

element-ui table组件的二次封装(插槽的形式) 由于业务需求，对el-table组件进行了二次封装，封装分为两层，两个组件嵌套，也能够单独使用
篇幅原因简单的JS逻辑处理没有贴上来了

1.外层table组件封装
新建

核心代码是这一段，通过插槽的形式，显示需要特殊处理的字段

外层组件table-view使用示例
{{ getType(row.templateType) }}{{ getStatus(row.templateStatus) }}


2.内层table组件代码
{{ operationData.edit.text || '编辑' }}{{ operationData.view.text || '查看' }}{{ operationData.del.text || '删除' }}

内层组件 itl-table使用示例
{{ scope.row.orgName }}{{ scope.row.postName }}

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

    推荐阅读


    上一篇：关于vue-tree-chart简单的使用

    下一篇：设计模式之外观模式