❤
npm
Sign UpSign In

@ifun-vue2/table

1.1.0 • Public • Published

IFunTable


自定义封装el-table、el-pagination，实现json方式配置表格。包括自定义列项内容、表头嵌套。支持所有el-table、el-pagination各自的属性配置

安装

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 在表格上方添加其他操作，比如操作按钮

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i @ifun-vue2/table

      Repository

      github.com/ifun-team/ifun-vue2/tree/main

      Homepage

      github.com/ifun-team/ifun-vue2/tree/main/packages/table#readme

      Weekly Downloads

      0

      Version

      1.1.0

      License

      MIT

      Unpacked Size

      38.8 kB

      Total Files

      16

      Last publish

      Collaborators

      • hboot
      Try on RunKit
      Report malware