基于 element-ui table 二次封装的简单表格

1,800 阅读4分钟

npm地址

# vue-element-easy-table

vue-element-easy-table

  • 基于 element-ui table 二次封装的简单表格

  • 完全支持 element ui table 组件的所有属性

安装

npm i vue-element-easy-table

示例

// 在main.js 引入
import EasyTable from "vue-element-easy-table";
Vue.use(
  EasyTable,
  /* 全局配置,element-ui table属性都可用 */ {
    // 表格属性
    tableAttrs: {
      border: true,
      size: "small",
      "header-row-class-name": "className",
    },
    // 单元格属性
    tableColumnAttrs: {
      align: "center",
      emptyPlaceholder: "--",
      omit: {
        rows: 2,
        direction: "top",
      },
    },
    // 分页属性
    paginationAttrs: {
      align: "right",
    },
  }
);
<EasyTable
  row-id="id"
  :data="tableData"
  :tableOptions="tableOptions"
  :page.sync="page"
  :page-size.sync="size"
  :total="total"
  :checkbox-config="{fetchVal: true, rowClick: true}"
  :radio-config="{selectedVal: selectedVal, fetchVal: true, rowClick: true}"
  @selected-change="select"
  @checked-change="handleChecked"
  @pagination="handleChangePage"
/>
export default {
  name: "App",
  components: {},
  data() {
    return {
      page: 1,
      size: 10,
      total: 1000,
      selectedVal: -1,
      tableData: [
        {
          id: 10,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          type: "1",
          img: require("@/assets/images/avatar.jpg"),
          status: 1,
        },
        {
          id: 21,
          date: "2016-05-04",
          name: "王小虎",
          address:
            "上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄",
          type: 0,
          img: require("@/assets/images/avatar.jpg"),
          status: 1,
        },
        {
          id: 33,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          type: false,
          img: require("@/assets/images/avatar.jpg"),
          status: 2,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          type: "上海市普陀区金沙江路 1516 上海市普陀区金沙江路 1516",
          img: require("@/assets/images/avatar.jpg"),
          status: 0,
        },
      ],
    };
  },
  computed: {
    tableOptions() {
      return [
        {
          title: "单选",
          type: "radio",
        },
        {
          title: "日期",
          prop: "date",
          merge: [
            {
              title: "名称",
              prop: "name",
              merge: [
                {
                  title: "名称1",
                  prop: "name",
                },
                {
                  title: "地址",
                  prop: "address",
                  returnVal: (value) => {
                    return `详细地址:${value}`;
                  },
                },
              ],
            },
            {
              title: "地址",
              prop: "address",
            },
          ],
        },
        {
          title: "名称111",
          prop: "type",
          renderHeader: () => {
            return (
              <span>
                <span>自定义表头</span>
                <sup>*</sup>
              </span>
            );
          },
          returnVal: (value, row) => {
            return `姓名: ${value}`;
          },
        },
        {
          title: "图片",
          render: (h, data) => {
            return (
              <div>
                <img style="width: 50px; height: 50px" src={data.img} />
              </div>
            );
          },
        },
        {
          title: "地址",
          prop: "address",
          omit: {
            effect: "light",
            rows: 2,
            direction: "top",
          },
        },
        {
          title: "地址",
          prop: "address",
          omit: 1,
        },
        {
          title: "状态",
          prop: "status",
          enumType: [
            {
              value: 0,
              label: "未开始",
            },
            {
              value: 1,
              label: "已开始",
            },
            {
              value: 2,
              label: "进行中",
            },
          ],
        },
        {
          title: "状态2",
          prop: "status",
          enumType: {
            // 自定义枚举参数
            params: {
              value: "status",
              label: "text",
            },
            data: [
              {
                status: 0,
                text: "未开始",
              },
              {
                status: 1,
                text: "已开始",
              },
              {
                status: 2,
                text: "进行中",
              },
            ],
          },
        },
      ];
    },
  },
  methods: {
    handleChangePage({ page, size }) {
      console.log(page, size);
      console.log(this.page);
      console.log(this.size);
    },
    handleChecked(data) {
      console.log("radio");
      console.log(data);
    },
    select(data) {
      console.log("selected");
      console.log(data);
    },
  },
};

Table Global Attribute


参数说明类型
tableAttrs表格属性object
tableColumnAttrs单元格属性object
paginationAttrs分页属性object



Table Attribute


参数说明类型可选
loading加载boolean
page当前页number
pageSize每页数量number
total数据总条数number
row-id行数据的取值参数string
tableOptions表格参数array
checkbox-configtype=selection 配置参数:“fetchVal 直接取值,row-id 必须填写取值属性,rowClick 点击行”object{fetchVal: boolean, rowClick: boolean}
radio-configtype=radio 配置参数:“selectedVal 默认选中,fetchVal 直接取值,row-id 必须填写取值属性,rowClick 点击行”object{selectedVal: selectedVal, fetchVal: boolean, rowClick: boolean}
paginationAttrs绑定分页属性,可参考 element-ui Pagination 属性object



Table Options


参数说明类型可选默认值
title显示的标题string
prop对应列内容的字段名string
width单元格宽度number
show是否显示booleantrue
align文本对齐方式stringleft/right/center
typeradio 显示单选框,其他参数对应 element-ui table 的 type 属性stringselection/index/expand/radio
attrs绑定属性,可参考 element-ui table Table-column Attributes 属性object
merge表头合并,递归合并表头,可多层合并array
render等同于 element-ui table “slot-scope”,“h:生成虚拟 dom 组件,data:当前行数据”Function(h, data)
checkcheck 为 false,使用 render 渲染,则不会验证 prop 字段数据值是否为空booleantrue
omit文字多行省略,可直接填写数字,或{ rows: 1, direction: 'top'},默认显示方向:“top”,如需改变方向修改 direction 参数即可(参数值参考 el-tooltip 的 placement 参数值),其他属性根据 element-ui el-tooltip 属性即可number/object
sortable列排序boolean
returnVal可对数据做相应处理返回。“val:prop 的对应值,rows:当前行数据”Function(val, rows)
enumType数据枚举,参数 prop 属性值进行过滤显示,如果枚举数据不是 lable 和 value 则使用自定义参数{ params: {label: '对应 label', value: '对应 value'}, data: enumData }array[{lable: string, value: any}]/object
renderHeader自定义表头Function
emptyPlaceholder空占位符。当数据值为:undefined/null/empty,则会用占位符显示string



Table Events


事件名说明类型
checked-change单选框选中回调,如果填写 row-id 属性并且"fetchVal: true",则取值返回,否则返回当前行数据Function(data)
selected-change多选框选中回调,如果填写 row-id 属性并且"fetchVal: true",则取值返回,否则返回当前行数据Function(data)
pagination切换分页或者 size 改变触发Function(page, size)