vue项目中element的表格二次封装

客官°小女子只卖身不卖艺 2021-11-17 07:08 360阅读 0赞

##### 1. 简介 #####

> 因小编之前主写react，已经习惯数据表格的json配置；而element-ui的table主要是以template的方式进行页面的渲染，容易造成业务代码可观性并不是很友好，维护也不是很方便；element-ui的成熟度、以及使用率很大，市场上面的大多封装也很多，可扩展性也很方便。这里小编也做了一套简易版的二次封装，希望能帮到各位

##### 2. 展现 #####

> 组件名我称为TableList，一个可以快速生成查询列表的封装组件，因项目组的原因未能使用jsx+render的方式来进行组件式的开发，有兴趣的可以自己试试；为了使扩展性更强，下面将Search查询组件和Table组件进行了分离封装；写过react的大家都知道props的传参方式\{…props\}很方便，那么vue的怎么支持这样的一个方式，下面我就使用到了v-bind属性绑定方式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]

##### 3. 实现方式及使用 #####

*  [ TableList组件][TableList] github地址
 *  [Npm使用地址][Npm]
 *  可以在component中创建TableList文件复制组件代码，在业务组件中引入即可；

/** * TableList表格组件 */
    /** * Table表格 */
    <template>
      <div class="table_list_fix">
        
        <slot name="content_context"></slot>
    
        
        <div v-if="exportBut && exportBut.length > 0" class="btn-operates">
          <a
            :key="index"
            :href="item.href || null"
            @click="item.method()"
            v-for="(item, index) in exportBut"
          >
            <el-button type="primary">{ { item.title}}</el-button>
          </a>
        </div>
    
        
        <el-table
          size="small"
          v-bind="options"
          :border="border"
          :data="dataSource"
          v-loading="loading"
          v-on="tableEvents"
          ref="multipleTable"
          style="width: 100%;"
          :header-cell-style="{ background: '#f6f2ee' }"
          @selection-change="handleSelectionChange"
        >
          
          <el-table-column
            type="selection"
            style="width: 55px;"
            v-if="options && options.selection && (!options.isShow || options.isShow()) "
          />
    
          <el-table-column
            width="60"
            align="center"
            type="index"
            v-if="options && options.index"
            :label="options && options.labelIndex"
          />
    
          
          <template v-for="(column, index) in columns">
            <el-table-column
              :key="index"
              v-bind="column.props"
              :prop="column.prop"
              :label="column.label"
              :align="column.align"
              :width="column.width"
              v-if="!column.isShow || (column.isShow && column.isShow())"
            >
              <template slot-scope="scope">
                <template v-if="!column.render">
                  <template v-if="column.formatter">
                    <span
                      v-html="column.formatter(scope.row, column, scope.$index)"
                      @click="column.click && column.click(scope.row, scope.$index)"
                    ></span>
                  </template>
                  <template v-else-if="column.newjump">
                    <router-link
                      class="newjump"
                      v-bind="{ target : '_blank', ...column.target }"
                      :to="column.newjump(scope.row, column, scope.$index)"
                    >{ { scope.row[column.prop] || column.content}}</router-link>
                  </template>
                  <template v-else>
                    <span
                      :style="column.click ? 'color: #409EFF; cursor: pointer;' : null"
                      @click="column.click && column.click(scope.row, scope.$index)"
                    >
                      { { scope.row[column.prop] || column.content}}
                      { { `${ scope.row[column.prop] && column.unit ? column.unit : ''}`}}
                    </span>
                  </template>
                </template>
                <template v-else>
                  <render :column="column" :row="scope.row" :render="column.render" :index="index"></render>
                </template>
              </template>
            </el-table-column>
          </template>
    
          
          <el-table-column label="操作" align="center" v-if="options && options.slotcontent">
            <template slot-scope="scope">
              <slot :data="scope.row"></slot>
            </template>
          </el-table-column>
    
          
          <el-table-column
            label="操作"
            align="center"
            v-bind="options && options.props"
            v-if="operates && operates.length > 0"
          >
            <template slot-scope="scope">
              <div class="operate-group">
                <template v-for="(btn, key) in operates">
                  <span
                    :key="key"
                    v-if="!btn.isShow || (btn.isShow && btn.isShow(scope.row, scope.$index))"
                  >
                    <el-button
                      :size="btn.size || 'small'"
                      :type="btn.type || `text`"
                      :icon="btn.icon"
                      :plain="btn.plain"
                      :disabled="btn.disabled && btn.disabled(scope.row, scope.$index)"
                      @click.native.prevent="btn.method(scope.row, scope.$index)"
                    >{ {  btn.label }}{ { operates.length >= 2 ? '  ' : ''}}</el-button>
                  </span>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <br />
        
        <el-pagination
          background
          class="pagination"
          v-if="pagination"
          :total="dataTotal"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          @current-change="handleChangePage"
          layout="total, prev, pager, next"
        />
      </div>
    </template>
    
    <script>
    let methods = { 
      // 复选框选中项
      handleSelectionChange(val) { 
        this.multipleSelection = val;
        this.$emit("handleSelectionChange", Array.from(val));
      },
    
      // 改变分页触发事件
      handleChangePage(val) { 
        this.$emit("handleChangePage", val);
      }
    };
    
    export default { 
      name: "TableList",
      props: { 
        dataSource: { 
          type: Array,
          default: []
        },
        columns: { 
          type: Array,
          default: []
        },
        border: { 
          type: Boolean,
          default: false
        },
        loading: { 
          type: Boolean,
          default: false
        },
        slotcontent: { 
          type: Boolean,
          default: false
        },
        operates: { 
          type: Array
        },
        pagination: { 
          type: Object,
          default: null
        },
        dataTotal: { 
          type: Number,
          default: 0
        },
        exportBut: { 
          type: Array
        },
        options: Object,
        tableEvents: Object
      },
    
      data() { 
        return { 
          multipleSelection: []
        };
      },
    
      methods,
    
      mounted() { 
        this.$nextTick(() => { 
          this.$emit("toggleRowSelection", this.$refs.multipleTable);
        });
      },
    
      components: { 
        render: { 
          functional: true,
          props: { 
            row: Object,
            render: Function,
            index: Number,
            column: { 
              type: Object,
              default: null
            }
          },
          render: (h, opt) => { 
            const params = { 
              row: opt.props.row,
              index: opt.props.index
            };
            if (opt.props.column) params.column = opt.props.column;
            return opt.props.render(h, params);
          }
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .table_list_fix { 
      overflow: hidden;
      .btn-operates { 
        margin-bottom: 6px;
        a { 
          color: #fff;
          text-decoration: none;
          display: inline-block;
        }
      }
    }
    .table-header { 
      padding-top: 10px;
      .table-header_button { 
        text-align: right;
        float: right;
        margin-bottom: 12px;
        line-height: 40px;
      }
    }
    .newjump { 
      text-decoration: none;
      color: dodgerblue;
    }
    
    .pagination { 
      text-align: center;
    }
    </style>

*  [Search组件][Search]：

/** * 查询条件组件 */
    <template>
      <div class="formSearch">
        <div class="table-header" v-if="tableSearch && tableSearch.length > 0">
          <el-form
            size="small"
            :rules="rules"
            :model="formSearch"
            :inline="true"
            ref="formSearch"
            label-position="right"
            v-bind="{'label-width': '110px', ...(options && options.formProps)}"
          >
            <el-form-item
              class="table-header-item"
              :label="item.label + '：'"
              :prop="item.value"
              :key="index"
              v-bind="item.labelProps"
              v-for="(item, index) in tableSearch"
            >
              <el-select
                clearable
                v-bind="item.props"
                v-if="item.type === 'select'"
                v-model="formSearch[item.value]"
                :placeholder="`请选择${item.placeholder || item.label}`"
              >
                <el-option
                  v-for="option in item.children"
                  :key="option.value"
                  :value="option.value"
                  :label="option.label"
                />
              </el-select>
              <el-date-picker
                clearable
                style="width: 100%;"
                placeholder="选择日期"
                v-bind="item.props || {type: 'date'}"
                v-else-if="item.type === 'picker'"
                v-model="formSearch[item.value]"
              />
              <el-input
                v-else
                clearable
                v-bind="item.props"
                :type="item.inputType || 'text'"
                v-model="formSearch[item.value]"
                :placeholder="`请输入${item.placeholder || item.label}`"
                :maxlength="item.maxlength"
                @keyup.enter.native="handleSearch"
                :oninput="handleChangeInput(item)"
              />
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button
                plain
                size="small"
                icon="el-icon-refresh-right"
                @click="handleReset('formSearch')"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    import {  convertParams } from "@/util/utilTool";
    
    let methods = { 
      // 搜索查询按钮
      handleSearch() { 
        if (this.rules) { 
          return this.$refs["formSearch"].validate(valid => { 
            if (!valid) return false;
            this.$emit(
              "handleSearch",
              convertParams(Object.assign({ }, this.formSearch))
            );
          });
        }
        this.$emit(
          "handleSearch",
          convertParams(Object.assign({ }, this.formSearch))
        );
      },
    
      // 搜索重置按钮
      handleReset(formName) { 
        this.$refs[formName].resetFields();
        this.formSearch = this.reset ? {  ...this.value } : { };
        this.$emit("handleReset");
        if (this.reset) return false;
        this.handleSearch();
      },
    
      // input为number校验
      handleChangeInput(item) { 
        return item.inputType === "number"
          ? this.handleOnInput(
              this.formSearch[item.value],
              item.value,
              item.rulesLength,
              item.maxlength
            )
          : null;
      },
    
      // input渲染长度校验
      handleOnInput(val, label, rulesLength, maxlength) { 
        if (val && Number(val) <= 0) { 
          this.formSearch[label] = 0;
        }
        if (rulesLength && val && val.length > maxlength) { 
          this.formSearch[label] = this.formSearch[label].slice(0, maxlength);
        }
      }
    };
    
    export default { 
      name: "FormSearch",
      props: { 
        tableSearch: { 
          type: Array
        },
        rules: { 
          type: Object
        },
        value: { 
          type: Object
        },
        reset: { 
          type: Boolean
        },
        rulesLength: { 
          type: Boolean
        },
        options: Object,
      },
    
      data() { 
        return { 
          formSearch: { 
            ...this.value
          }
        };
      },
    
      methods,
    
      watch: { 
        value(val) { 
          if (val) return (this.formSearch = {  ...this.value });
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .table-header { 
      padding-top: 10px;
      .table-header-item .el-form-item { 
        width: 100%;
        display: flex;
        margin-bottom: 12px;
        .el-form-item__content,
        .el-select { 
          width: 100%;
        }
      }
    }
    </style>

##### 4. TableList使用文档 #####

[https://github.com/njt1340953658/TableList][https_github.com_njt1340953658_TableList]

> 简单的一个思路就是将繁琐的事情，通过json的数据结构模式，来帮助我们渲染ui层，将一部分的逻辑代码放在我们的组件内部，从而减少业务层代码的复杂性操作。

##### 5. 思考 #####

*  如何在工作中达到快速开发，不在做重复性工作？
 *  怎样去思考自己的业务线去发展，沉淀出属于自己的东西
 *  如何去封装组件，怎么样才能够到达可观性、复用性，降低团队的开发成本
 *  身在职位长期的一个积累与思考、认知度要逐步去提高
 *  一定要学会去看api使用文档，在框架的时代也要逐步去习读源码。

##### 6. 结语 #####

> 小编也是前端小白，代码也有不合理之处，只是在闲余时间内简单写写，提升提升能力。以上代码可根据自己的项目去做调整。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]: /images/20211116/209a9b6aa1bc418f992a437ebf381edf.png
[TableList]: https://github.com/njt1340953658/TableList/blob/master/src/components/TableList.vue
[Npm]: https://www.npmjs.com/package/table-form-list
[Search]: https://github.com/njt1340953658/TableList/blob/master/src/components/Search.vue
[https_github.com_njt1340953658_TableList]: https://github.com/njt1340953658/TableList