dynamic-table-render

动态表格 （基于element-ui）

=================

  npm i dynamic-table-render

使用

import dynamicTableRender  from 'dynamic-table-render'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.use(dynamicTableRender)

参数说明

columns: 表头配置
data:数据列 
showPagination: 是否展示分页
pagination: 同el-pagination配置
其他参数配置同 el-table配置

实例

 data: [
        {
          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 弄",
        },
      ],
      pagination: {
        total: 10,
        page: 1,
        size: 5,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      columns: [
        {
          prop: "index",
          label: "序号",
          align: "center",
          width: "60",
          formatter: (row, column, cellValue, index) => {
            const _this = this;
            return (
              (_this.pagination.page - 1) * _this.pagination.size + index + 1
            );
          },
        },
        {
          prop: "date",
          label: "日期",
          width: "120",
          align: "center",
        },
        {
          prop: "name",
          label: "名字",
          width: "160",
          align: "center",
        },
        {
          prop: "address",
          label: "地址",
          align: "center",
        },
        {
          label: "操作",
          align: "center",
          fixed: "right",
          width: "220",
          render: (h, { row }) => {
            const props = {
              type: "primary",
              size: "mini",
            };
            return h("div", [
              h(
                "el-button",
                {
                  props: props,
                  on: {
                    click: () => {
                      console.log(row);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "el-button",
                {
                  props: props,
                },
                "删除"
              ),
            ]);
          },
        },
      ],