element-ui Table二次封装

因为原来自己用的是AntD的组件，element-ui也是使用了很长的一段时间，但是感觉页面标签太多，所以今天就封装了一下table组件，来减少标签的使用，自己同时也封装了弹框表单，搜索框等，今天就先介绍table的封装，起名：TablePro
首先是我们对大量的el-table-column标签的循环

<el-table
        :data="dataSourse"
        :fit="fit"
        border
        row-key="id"
        :size="size"
        v-loading="loading"
        :tree-props="{children:'children',hasChildren:'hasChildren'}"
        @selection-change="handleSelectionChange"
      >
        <template v-for="(item, index) in columns">
        </template>
      </el-table>

然后就是传入参数的方式

columns: [
        {
          type: "selection",
          dataIndex: "",
        },
        {
          title: "标题",
          dataIndex: "title",
        },
        {
          title: "排序",
          dataIndex: "sort",
        },
        {
          title: "状态",
          dataIndex: "status",
        },
        {
          title: "操作",
          dataIndex: "options",
          render: (record) => {
            return (
              <div>
                <el-button on-click={this.onClick.bind(this, record)}>
                  点击
                </el-button>
              </div>
            );
          },
        },
      ],
      dataSource: [
        {
          id: 1,
          title: "nihao",
          sort: 1,
          status: 2,
          // children:[
          //   {
          //     id:11,
          //     title:"nihao",
          //     sort:1,
          //     status:2,
          //   }
          // ]
        },
      ],

对比antD的传入方式ant - design -React官网：https://ant.design/components/table-cn/

先比原来省去大量的标签，添加了对象，数组取循环显示，其中再传入自定义表格显示内容用了render函数

重点

相比于上面自我感觉封装的重点，就是要考虑使用再不同场景下这个组件的兼容性是很好的

• 首先
  要判断传入的类型，是否带有复选框，是否有子表格，是否自定义内容等等，
  首先判断是否含有复选框，可能就是直接用v-if取判断传入参数是否含有type就可以了，但是，我们再使用的场景下，复选框是不直接显示的，但是直接利用el-table-column标签是不行的，所以我们要在这个外面加上template标签，在定义一个参数去控制是否显示一定不能忘记key的绑定
  其次就是render自定义表格显示内容的编写，有两种方法，
  • 利用render函数特性
    我们需要在自定义一个组件去显示内容，但是会特别麻烦，要求对虚拟dom和真实dom有一定的了解
    直接代码

<el-table-column
            v-if="item.render"
            :key="item.title"
            :label="item.title"
            :prop="item.dataIndex"
            :width="item.width"
            :fixed="item.fixed"
            :align.sync="item.align"
            :header-align="item.header_align"
          >
            <template slot-scope="scope">
              <expand-dom
                v-if="item.render"
                :row="scope.row"
                :column="item"
                :render="item.render"
              >
              </expand-dom>
            </template>
          </el-table-column>
// js部分
components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      },
    },
  },

这样的方法就是按照vue原有的特性去显示内容，

• 利用element-ui el-table-column中formatter的属性
  
  利用它也是可以直接自定义属性的
  在父组件传入的render中要注意的就是，这两种方法返回的是不同的
  第一种返回row,index和column，其中row则是我们需要的内容
  第二种返回去看官网介绍吧（哈哈哈）
  两种方法，在绑定方法上都是和原来相同的方法，必须要用bind绑定函数，
  几天没更新了，也是拿着原来写的东西来说一下哈哈

本文连接：点击
博主个人小博客：嘿嘿

博主的这款个人博客利用的主要的技术是antD，React，node.js，Egg.js，Next.js和MongoDB 里面有好多不完善的地方，自己虽然解决了一部分，但是也没部署服务器，同时，自己正在搭建利用element-ui，antD，antD-ProComponents，React，Vue，nuxt,Golang，MySql，TypeScript去搭建这样的一个网站。（希望和大家一起学习进步）