el-table二次封装DataTable组件

DataTable源码链接

组件目录结构

• DataTable
  • index.vue
  • dataTableMixin.js
  • DataTableColumn.vue
  • props.js
  • utils.js

使用方式

// DataTableDemo.vue
<template>
  <div>
    <!-- 方式1 -->
    <data-table
      v-model="dataSource"
      :columns="columns"
      :pagination="pagination"
    >
      <template #cus-render="{cellValue}">-{{ cellValue }}-</template>
    </data-table>
    <br />
    <!-- 方式2 -->
    <data-table
      ref="dataTableRef"
      manualRender
      checkbox-mode="multiple"
      v-model="dataSource2"
      :columns="columns"
    >
      <template #cus-render="{cellValue}">** {{ cellValue }} **</template>
    </data-table>
    <br />
    <!-- 方式3 -->
    <data-table
      v-model="dataSource3"
      :columns="columns"
      :tableReq="tableReq"
    >
      <template #cus-render="{cellValue}">##{{ cellValue }}##</template>
    </data-table>
  </div>
</template>
<script>
import DataTable from '../components/DataTable';
const list = () => {
  return [
    {
      id: 1,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      date: '2016-10-03'
    },
    {
      id: 2,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
      date: '2016-10-01'
    },
    {
      id: 3,
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
      sex: '男',
      date: '2016-10-02'
    },
    {
      id: 4,
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
      tags: ['nice'],
      date: '2016-10-04'
    }
  ];
}
export default {
  components: { DataTable },
  data() {
    return {
      pagination: { pageSize:10 },
      dataSource: [],
      // 根据dataSource中的字段生成对象的columns
      columns: [
        { type: 'selection', field: 'id' },
        { label: 'name', field: 'name', cusRender: 'cus-render' },
        { label: 'age', field: 'age' },
        { label: 'address', field: 'address', width: 200 },
        { label: 'multiple tags', field: 'multags',
          children: [
            { label: 'tag1', field: 'tags', cusRender: (h, { cellValue }) => [cellValue[0]] },
            { label: 'sex', field: 'sex' },
          ]
        },
        { label: 'date', field: 'date' }
      ],
      dataSource2: [],
      dataSource3: [],
      tableReq(paging) {
        console.log('paging', paging);
        // 模拟异步接口任务
        return Promise.resolve(list());
      },
    }
  },
  mounted() {
    // 方式1
    this.fetchList(true);
    // // 方式2
    this.fetchList2(true);
  },
  methods: {
    fetchList(isFirstPage) {
      setTimeout(() => {
        this.pagination.total = 100;
        isFirstPage && (this.pagination.pageNo = 1);
        this.dataSource = list();
      }, 600)
    },
    fetchList2(isFirstPage) {
      this.$refs.dataTableRef.renderTable(list(), undefined, isFirstPage);
    }
  }
}
</script>

源码如下图：

index.vue 代码

dataTableMixin.js 代码

DataTableColumn.vue 代码

props.js 代码

utils.js 代码