element-ui 封装table表格成公共组件（包括增删改查、内置date，select，input）

1、封装部分

直接复制粘贴吧，里面内容有点杂可以把不需要的内容去掉，template里面有点啰嗦，懒得改了

<template>
  <!-- table的增删改查 -->
  <div class="tableRow">
    <template>
      <el-table
        ref="editTable"
        :header-cell-style="{background:'#f2f9fc',padding:'10px 10px'}"
        :data="data"
        class="tableColumn"
        v-on="$listeners">
        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          align="center"
        >

          <template slot-scope="scope">
            <span v-if="item.label==='序号'" >{{ scope.$index+1 }}</span>

            <!-- 上传文件 -->
            <LkUpload v-else-if="item.type==='upload'" v-model="scope.row[item.prop]" :fileIdKey="id" :fileNameKey="name"></LkUpload>

            <!-- 下拉选择 -->
            <LkSelect
              v-else-if="item.type==='isHave'"
              v-model.trim="scope.row[item.prop]"
              :data="isHave"
              label-key="name"
              value-key="name"
              filterable
              style="width:100%"
              placeholder="请选择"
              @change="changeValue(scope.row[item.prop],index)"
            />

            <LkSelect
              v-else-if="item.type==='select'"
              v-model.trim="scope.row[item.prop]"
              :data="assetTypeList"
              label-key="name"
              value-key="name"
              filterable
              placeholder="请选择"
              style="width:100%"/>

            <!-- 输入框 -->
            <lk-input v-else-if="item.type==='input'" v-model.trim="scope.row[item.prop]" placeholder="请输入" :maxlength="item.maxlength" />

            <el-input
              v-else-if="item.type==='textarea'"
              v-model.trim="scope.row[item.prop]"
              type="textarea"
              maxlength="1000"
              placeholder="请输入"
            >
            </el-input>

            <!-- 数字类型 -->
            <el-input v-else-if="item.type==='number'" v-model.trim="scope.row[item.prop]" placeholder="请输入" :maxlength="20" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"></el-input>

            <!-- 百分比类型 -->
            <el-input v-else-if="item.type==='percent'" v-model.trim="scope.row[item.prop]" placeholder="请输入" :maxlength="20" @input="oninputHundred(scope.row,item.prop)"></el-input>

            <span v-else-if="item.type==='text'" >{{ scope.row[item.prop] }}</span>

            <!-- 选择日期 -->
            <el-date-picker
              v-else-if="item.type==='date'"
              v-model="scope.row[item.prop]"
              class="dateTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width:100%;">
            </el-date-picker>

            <!-- 公共select -->
            <LkSelect
              v-else-if="item.type==='selectData'"
              v-model.trim="scope.row[item.prop]"
              :data="selectData"
              label-key="value"
              value-key="key"
              filterable
              placeholder="请选择"
              style="width:100%"
              @change="selectModel"/>

            <!-- 删除按钮 -->
            <el-link v-else-if="item.type==='del'" type="danger" :underline="false" @click="del(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 下方新增按钮 -->
    <div v-if="flagButton" class="buttonAdd">
      <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="mini" @click="addButton">新增</el-button>
    </div>

  </div>
</template>

<script>
import { notify } from '@/utils';
export default {
  name: '',
  components: {},
  props: {
    flagButton: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },

    selectData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isHave: [
        {
          name: '否',
          value: '0'
        },
        {
          name: '是',
          value: '1'
        }
      ],
      assetTypeList: [
        {
          name: '股票资产'
        },
        {
          name: '房产'
        },
        {
          name: '其他资产'
        }
      ]
    };
  },
  mounted() {

  },

  created() {

  },

  methods: {

    changeValue(v, index) {
      // if (v === '否') {
      //   this.disabledUp = true;
      //   this.disabledRe = false;
      // } else if (v === '是') {
      //   this.disabledUp = false;
      //   this.disabledRe = true;
      // }
    },

    addButton() {
      var flag = true;
      // if (this.data.length > 9) {
      //   return notify('新增数量不能超过10个！');
      // }
      if (this.data && this.data.length > 0) {
        this.data.forEach(item => {
          var target = false;
          if (item.shahNme === '' || item.shahNme === null) {
            target = true;
          } else if (item.origSscrAmt === '' || item.origSscrAmt === null) {
            target = true;
          } else if (item.sscrOutAmt === '' || item.sscrOutAmt === null) {
            target = true;
          } else if (item.czlx === '' || item.czlx === null) {
            target = true;
          } else if (item.shahOutAmtRat === '' || item.shahOutAmtRat === null) {
            target = true;
          }
          if (target) {
            flag = true;
            return true;
          } else {
            flag = false;
          }
        });
      } else {
        flag = false;
      }

      if (flag) {
        notify('请完善新增的数据');
        return; // 阻断非空验证
      }

      const self = this;
      const obj = {};
      if (self.columns.length > 0) {
        self.columns.forEach(item => {
          if (item.prop === 'czlx') {
            obj[`${item.prop}`] = '人民币';
          } else if (item.prop && item.prop !== '出资类型') {
            obj[`${item.prop}`] = '';
          }
        });
      }
      this.data.push(obj);

      this.$nextTick(() => {
        this.$refs.editTable.bodyWrapper.scrollTop = this.$refs.editTable.bodyWrapper.scrollHeight;
      });
    },

    // 删除
    del(index) {
      this.data.splice(index, 1);
    },

    //
    selectModel(v) {
      console.log(v, '==============');
      this.$emit('selectModel', v);
    },

    // input规则验证 不能大于100的百分比
    oninputHundred(p, v) {
      p[v] = p[v]
        .replace(/[^\d^.]+/g, '')
        .replace(/^0+(\d)/, '$1')
        .replace(/^\./, '0.')
        .match(/^\d*(\.?\d{0,2})/g)[0] || '';

      if (Number(p[v] >= 100)) {
        p[v] = 0;
        this.$message.error('百分比不能大于100');
      }
    }
  }
};
</script>

<style lang="scss">
.tableRow {
  width: 100%;
  .el-icon-circle-plus-outline {
    font-size: 22px;
    margin-top: 6px;
    margin-left: 12px;
  }
  .remove {
    color: #e6550d;
  }

  .buttonAdd {
    margin: 10px 0;
    .el-icon-circle-plus-outline {
      font-size: 12px;
      margin-top: 0px;
      margin-left: 0px;
    }
    &.top {
      margin-top: 0;
    }
  }
}
.el-row {
  width: 100%;
}

.el-button--primary.is-plain {
  border-radius: 6px 6px;
}

    .tableColumn {

      .el-table__body-wrapper {
        max-height: 280px;
        min-height: 0px;
        overflow-y: scroll;

        ::v-deep .el-table td.el-table__cell div {
          width: 100%;
          .el-input--medium .el-input__inner {
            padding-right: 0px;
          }
        }
      }
    }

    ::v-deep .tableColumn .el-table td.el-table__cell div {
      width: 100%!important;
    }

    .xh {
      width: 20px;
    }

</style>

2、在你自己开发的页面用import 引入这个公共组件

html部分

		<LkAddDelTable
          :header-cell-style="zjytList"
          :columns="columns"
          :data="form.zjytList"
        ></LkAddDelTable>

data（）中定义的columns

	columns: [
        { prop: 'initTxnTmptCptlPurp', type: 'input', label: '初始交易时点资金用途', maxlength: 200 },
        { prop: 'initTxnTmptPrepUseAmt', type: 'number', label: '初始交易时点拟使用金额/万元' },
        { prop: 'actlCptlPurp', type: 'input', label: '实际资金用途', maxlength: 200 },
        { prop: 'actlUseAmt', type: 'number', label: '实际使用金额/万元' },
        { prop: 'corrCertMatrList', type: 'input', label: '对应证明材料清单1', maxlength: 2000 },
        { label: '', type: 'del', width: '100' }
      ],
	zjytList:[]

最后自己根据需求去改吧