安装

npm i @ifun-vue2/table

使用

import IFunTable from "@ifun-vue2/table";
// 样式
import "@ifun-vue2/table/dist/style.css";
// 使用
Vue.use(IFunTable);

基本使用，数据展示

通过传入data, 数据类型为数组。

<template>
  <div class="table-list">
    <IFunTable :tableOptions="tableOptions" :pageOptions="pageOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
      },
      pageOptions: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        background: true,
        layout: "total,sizes, prev, pager, next, jumper",
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      name: "数据" + index,
      address: "北京朝阳大妈跳舞广场",
    }));
    this.pageOptions.total = 100;
  },
};
</script>

不需要分页showPagination:false

使用showPagination 来定义列表不需要分页；默认是分页的；

<template>
  <div class="table-list">
    <IFunTable :tableOptions="tableOptions" :showPagination="false" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      name: "数据" + index,
      address: "北京朝阳大妈跳舞广场",
    }));
  },
};
</script>

自定义渲染列项内容

通过定义tableOptions.columns中每一项的 render 来自定义渲染内容。

<template>
  <div class="table-list">
    <IFunTable :tableOptions="tableOptions" :showPagination="false" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
        render(h, row, column, index) {
          return <div>I'm {row.name}</div>;
        },
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      name: "数据" + index,
      address: "北京朝阳大妈跳舞广场",
    }));
  },
};
</script>

监听分页事件，只需监听一个事件，即可完成所有分页事件功能

通过监听属性change,来处理分页的逻辑。

<template>
  <div class="table-list">
    <IFunTable
      :tableOptions="tableOptions"
      :pageOptions="pageOptions"
      @change="handleChangePagination"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
      },
      pageOptions: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        background: true,
        layout: "total,sizes, prev, pager, next, jumper",
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      name: "数据" + index,
      address: "北京朝阳大妈跳舞广场",
    }));
    this.pageOptions.total = 100;
  },
  methods: {
    /**
     * info 中的更改属性和pageOptions 一致
     * pageSize
     * pageNum
     **/
    handleChangePagination(info) {
      this.pageOptions = {
        ...this.pageOptions,
        ...info,
      };
      // 调用数据请求的方法即可
    },
  },
};
</script>

通过对象传递参数的方式，屏蔽了分页、size 的更改。只需监听一次事件就好了。

表头嵌套，可无限级进行嵌套渲染。

常见的表头嵌套，只需配置数据嵌套即可实现表单嵌套，定义tableOptions.columns项属性nested:true,然后在定义属性columns即可

<template>
  <div class="table-list">
    <IFunTable :tableOptions="tableOptions" :pageOptions="pageOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
      },
      pageOptions: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        background: true,
        layout: "total,sizes, prev, pager, next, jumper",
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
        nested: true,
        columns: [
          {
            prop: "first",
            label: "大姓",
          },
          {
            prop: "last",
            label: "小名",
          },
        ],
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      first: index + "01",
      last: index + "02",
      address: "北京朝阳大妈跳舞广场",
    }));
    this.pageOptions.total = 100;
  },
};
</script>

表格展开

通过tableOptions.expand 定义表格可展开，通过tableOptions.renderExpandTable定义渲染函数

<template>
  <div class="table-list">
    <IFunTable :tableOptions="tableOptions" :pageOptions="pageOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [],
        expand: true,
      },
      pageOptions: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        background: true,
        layout: "total,sizes, prev, pager, next, jumper",
      },
    };
  },
  mounted() {
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
      },
      {
        prop: "address",
        label: "地址",
      },
    ];
    this.tableOptions.data = new Array(20).fill(0).map((item, index) => ({
      id: index,
      first: index + "01",
      last: index + "02",
      address: "北京朝阳大妈跳舞广场",
    }));
    this.pageOptions.total = 100;

    //
    this.tableOptions.renderExpandTable = (h, row, column, index) => {
      return <p>这是展开视图</p>;
    };
  },
};
</script>

自定义表头

通过tableOptions.columns.[column].headerRender 自定义表头

<script lang="jsx">
export default {
  data() {
    return {
      checkedAll: false,
      tableOptions: {
        data: [],
        columns: [],
      },
      pageOptions: {
        total: 100,
        pageSize: 10,
        pageNum: 1,
        background: true,
        layout: "total,sizes, prev, pager, next, jumper",
      },
    };
  },
  mounted() {
    let $this = this;
    this.tableOptions.columns = [
      {
        prop: "id",
        label: "id",
      },
      {
        prop: "name",
        label: "名称",
        nested: true,
        columns: [
          {
            prop: "firstName",
            label: "姓氏",
          },
          {
            prop: "lastName",
            label: "名",
            headerRender(h, row, column, index) {
              return (
                <div>
                  <span>{column.label}</span>
                  <el-tag>hot</el-tag>
                </div>
              );
            },
          },
        ],
      },
      {
        prop: "age",
        label: "年龄",
      },
      {
        prop: "address",
        label: "地址",
      },
      {
        prop: "operate",
        label: "操作",
        render(h, row) {
          return <el-checkbox vModel={row.checked} />;
        },
        headerRender(h, row, column, index) {
          return (
            <el-checkbox
              vModel={$this.checkedAll}
              onChange={() => $this.checkedAllData()}
            />
          );
        },
      },
    ];
  },
};
</script>

API 属性一览

| props | 说明 | 默认值 | | -------------- | :------------------------------: | ---------------------: | | tableOptions | 列表配置项 | 详情查看tableOptions | | loading | 数据加载中，其他列表禁止操作状态 | | | showPagination | 是否分页 | 默认 true，分页 | | pageOptions | 分页配置项 | 详情查看pageOptions |

el-table 其他所有可设置的属性以及方法、事件。

tableOptions

| props | 说明 | 默认值 | | ----------------- | :---------------------------------------------------------: | -----: | | data | 列表数据 Array，必须 | | | columns | 表格列项属性，必须 | | | expand | 表格是否可以展开，为 true 时 renderExpandTable 必须 | fasle | | renderExpandTable | 展开列项的渲染函数，Function 参数为 (h,row,columns,index) | |

pageOptions

所有el-pagination 可设置的属性，有几个是自定义

| props | 说明 | 默认值 | | -------- | :---------------------------: | -----: | | total | 数据总数，必须 | | | pageSize | 分页 size，一页可展示的数据量 | | | pageNum | 页码，当前是第几页 | |

tableOptions.columns

定义表格列项数据，自定义渲染列、自定义渲染表头、潜逃表格

| props | 说明 | 默认值 | | ------------------- | :--------------------------: | ---------------------------: | | prop ｜列项数据键值 | | | label | 列项名称 | | | nested | 是否嵌套列 | boolean | | columns | 嵌套列时，定义潜逃的子列数据 | | | render | 自定义列渲染函数 | Function(h,row,column,index) | | headerRender | 自定义列表头 | Function(h,row,column,index) |

slot

| slot 名称 | 说明 | 默认值 | | --------- | :----------------------------------: | -----: | | header | 在表格上方添加其他操作，比如操作按钮 | |