1. vue-easy-table-element

vue-easy-table-element

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-config type=selection 配置参数:“fetchVal 直接取值,row-id 必须填写取值属性,rowClick 点击行” object {fetchVal: boolean, rowClick: boolean}
radio-config type=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 是否显示 boolean true
align 文本对齐方式 string left/right/center
type radio 显示单选框,其他参数对应 element-ui table 的 type 属性 string selection/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)
check check 为 false,使用 render 渲染,则不会验证 prop 字段数据值是否为空 boolean true
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)




更新日志

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 日

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