Element ui表格组件修改，实现可编辑单元格，自定义下拉筛选，数据化结构，快捷选择。

前言

在使用ElementUI过程中，表格的使用占了很大一部分，但是使用起来总感觉不方便，而且部分想要的功能也没有。这促使我在ElementUI 表格组件上再进行一次封装。在这基础上添加所需功能，并且要使用更方便，但是不能破坏原有功能。

此项目已经上传GitHub，欢迎交流。如果有所帮助，希望能给个star鼓励一下，谢谢^-。在线Demo

效果

主要内容

• 数据化结构（减少html代码）
• 可编辑单元格（同时满足不同编辑形式）
• 自定义显示单元格内容 （el-table-column作用域插槽的数据结构版）
• 自定义下拉筛选（获取远程下拉筛选条件，自定义下拉筛选形式）
• 选择数据简单化（单击选择/取消，快捷多选，连续多选）
• 保证原有功能

因为代码太多所以没有全部放，只抽出部分讲解，感兴趣的小伙伴可以到GitHub下载一份源码。

数据化结构

将原有的html结构变为数据结构，只用写一个数组传入就可生成想要的结构

• 原来

 <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150">el-table-column>
    
    <el-table-column label="配送信息">
      <el-table-column prop="name" label="姓名" width="120">el-table-column>
      <el-table-column label="地址">
        <el-table-column prop="province" label="省份" width="120">el-table-column>
        <el-table-column prop="city" label="市区" width="120">el-table-column>
        <el-table-column prop="address" label="地址" width="300">el-table-column>
        <el-table-column prop="zip" label="邮编" width="120">el-table-column>
      el-table-column>
    el-table-column>
  el-table>
 el-table>

• 现在

//html e-table为封装好的组件名


//数据
columns: [
      {
        prop: "date",
        label: "日期",
        width: 150
      },
      {
        label: "配送信息",
        childrens: [
          {
            label: "地址",
            childrens: [
              {
                label: "省份",
                prop: "province",
                with:120
              },
              {
                label: "市区",
                prop: "city"
              }
              ...
            ]
          }
        ]
      }
    ]

这样数据化之后可以更方便操作,结构也更清晰。每一个el-table-column对应columns数组中的一个元素，可以嵌套实现多级表头。元素里面可以包含所有el-table-column上的属性。

实现方式

通过render函数循环嵌套生成,也可以写.vue的单文件用html结构生成，但是没有render函数生成可操控性高，render函数可以更加精确的操控元素，也更加贴近编译器。还没用过的同学赶快学习一下把 render

// render 函数部分代码
render(h){
   
    let _this = this,
    columnRender = function(col,h){
   
    if(!hasOwn(col, 'childrens')){
   
        .... // 主要内容 单独讲
    }else{
   
        if (Array.isArray(col.childrens) && col.childrens.length > 0) {
   
                    return h('el-table-column', {
   
                        attrs