如何基于现有框架的table进行二次封装

Posted 2021-09-09 2ming

有时候大家肯定在想，我能不能直接一个columns,直接出来一个表格,我以前分享过类似表单的封装，今天给大家带来表格的封装，希望能帮助到需要的人，如果有帮助到你，可以点个赞

<template>
  <div>
    <v-table :data="tableData" :columns="columns"> </v-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: \'2016-05-02\',
          name: \'王小虎\',
          address: \'上海市普陀区金沙江路 1518 弄\',
        },
        {
          date: \'2016-05-04\',
          name: \'王小虎\',
          address: \'上海市普陀区金沙江路 1517 弄\',
        },
        {
          date: \'2016-05-01\',
          name: \'王小虎\',
          address: \'上海市普陀区金沙江路 1519 弄\',
        },
        {
          date: \'2016-05-03\',
          name: \'王小虎\',
          address: \'上海市普陀区金沙江路 1516 弄\',
        },
      ],
      columns: [
        {
          prop: \'date\',
          label: \'日期\',
        },
        {
          prop: \'name\',
          label: \'标题\',
        },
        {
          prop: \'address\',
          label: \'地址\',
        }
      ],
    };
  }
};
</script>

怎么实现呢？是不是可以在element-ui的基础上再封装一层呢？！！！上代码

<script type="text/jsx">
export default {
  name: \'VTable\',
  props: {
    columns: {
      required: true,
      type: Array,
      default: () => ([])
    },
    data: {
      type: Array,
      default: () => ([])
    },
  },
  render(h) {
    return <div>
      <el-table props={{ data: this.data }}>
        {
          this.columns.map(item => {
            return <el-table-column props={{ ...item }} > </el-table-column>
          })
        }
      </el-table>
    </div>
  }
}
</script>

非常的简单普通就达到的我们想要的目的，如果你以为到这就满足了需求你就错了。

1. 能不能直接传一个异步接口？
2. 能不能兼容slot?
3. 能不能兼容element的el-table
   答案肯定是可以的嘛，不然我写出来干嘛，直接上菜

//list.vue
<template>
  <div>
    <v-table :table="{ size: \'medium\' }" :api="getData" :columns="columns">
      <template v-slot:name="scope">{{ scope.row.name }}</template>
      <template v-slot:action="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </v-table>
  </div>
</template>

// VTable.vue
<script type="text/jsx">
export default {
  name: \'VTable\',
  props: {
    columns: {
      required: true,
      type: Array,
      default: () => ([])
    },
    table: {
      type: Object,
      default: () => {}
    },
    api: {
      required: true,
      type: Function,
      default: () => Promise.resolve({
        list: []
      })
    }
  },
  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(params){
      this.api({ ...params }).then(res => {
        let { list } = res
        this.data = list
      })
    }
  },
  render(h) {
    return <div>
      <el-table props={{ ...this.table, data: this.data }}>
        {
          this.columns.map(item => {
            return <el-table-column  props={{ ...item }} >
              {this.$scopedSlots[item.prop]}
            </el-table-column>
          })
        }
      </el-table>
    </div>
  }
}
</script>

后续

• 封装分页
• 封装表格筛选表单
  大家可以根据自己的需求在这个基础上去做扩展