🤦‍♂️vue项目中element的表格二次封装

gitup地址

1.简介

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

2. 展现

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

3. 实现方式及使用

• TableList组件 github地址
• Npm使用地址

• 可以在component中创建TableList文件复制组件代码，在业务组件中引入即可； ```javascript /**

  • TableList表格组件 / /*

  • Table表格 */

- [Search组件](https://github.com/njt1340953658/TableList/blob/master/src/components/Search.vue)：
```javascript
/**
 * 查询条件组件
 */
<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使用文档

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

5.思考

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

  6. 结语

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