vue-element-easy-table v0.5.4

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

Table Attribute

Table Options

Table Events

更新日志

2020 年 11 月 19 日

• 首次提交
• 新增空占位符

2020 年 11 月 27 日

• 新增数据枚举，自定义枚举参数

2020 年 11 月 28 日

• 新增自定义返回值

2020 年 12 月 01 日

• 修复 tableOptions 数据未响应

2020 年 12 月 02 日

• 解决 form 表单属性无法双向绑定
• 新增自定义表头（合并表头无法自定义）

2020 年 12 月 07 日

• 修复切换表格数据页面样式出错

2020 年 12 月 10 日

• 新增 N 行文字显示省略 & tips 显示

2020 年 12 月 17 日

• 修复 radio 单选返回值 undefined

2020 年 12 月 22 日

• 优化多行文字省略

2020 年 12 月 24 日

• 优化枚举数据
• 新增 slot-empty

2020 年 12 月 29 日

• 更新文档

2020 年 12 月 30 日

• 新增 render 渲染验证数据

2021 年 1 月 22 日

• pagination 切换页码、页数返回值

2021 年 4 月 15 日

• 修复分页全局 layout 无效

2021 年 9 月 7 日

• 修复单选框选择数据报错

2021 年 9 月 15 日

• 修复单选框设置默认值报错

2024 年 3 月 11 日

• 增加列、行拖拽排序