vue-element-easy-search-table

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

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

• 基于 element-ui 二次封装的搜索动态表单

安装

npm i vue-element-easy-search-table

示例

// 在main.js 引入
import EasySearchTable from "vue-element-easy-search-table";
Vue.use(
  EasySearchTable,
  /* 全局配置 */ {
    // 表格属性
    tableAttrs: {
      border: true,
      size: "small",
      "header-row-class-name": "className",
    },
    // 单元格属性
    tableColumnAttrs: {
      align: "center",
      emptyPlaceholder: "--",
      omit: {
        rows: 2,
        direction: "top",
      },
    },
    // 分页属性
    paginationAttrs: {
      align: "right",
    },
    // 搜索属性
    searchAttrs: {
      expandHideCount: 2,
    },
  }
);

<EasySearchTable
  row-id="id"
  :data="list"
  :tableOptions="tableOptions"
  :page.sync="page"
  :page-size.sync="size"
  :total="tableData.length"
  :checkbox-config="{ fetchVal: true, rowClick: true }"
  :radio-config="{ fetchVal: true, rowClick: true }"
  :searchOptions="searchOptions"
  :search="search"
  @checked-change="handleChecked"
  @selected-change="select"
  @pagination="handleChangePage"
>
</EasySearchTable>

<!-- 或者分离使用 -->
<Search :searchOptions="searchOptions" :search="search" />
<EasyTable
  row-id="id"
  :data="list"
  :tableOptions="tableOptions"
  :page.sync="page"
  :page-size.sync="size"
  :total="tableData.length"
  :checkbox-config="{ fetchVal: true, rowClick: true }"
  :radio-config="{ fetchVal: true, rowClick: true }"
  :pageSizes="[2]"
  @checked-change="handleChecked"
  @selected-change="select"
  @pagination="handleChangePage"
/>

export default {
  name: "App",
  components: {},
  data() {
    return {
      page: 1,
      size: 2,
      total: 1000,
      selectedVal: -1,
      list: [],
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          type: "1",
          img: require("@/assets/images/avatar.jpg"),
          status: 1,
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address:
            "上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄",
          type: 0,
          img: require("@/assets/images/avatar.jpg"),
          status: 1,
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄弄弄",
          type: "",
          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: "selection",
        },
        {
          title: "日期",
          prop: "date",
          merge: [
            {
              title: "名称",
              prop: "name",

              merge: [
                {
                  title: "名称1",
                  prop: "type",

                  check: true,
                  render: (h, data) => {
                    return <span>姓名：{data.type}</span>;
                  },
                },
                {
                  title: "地址",
                  prop: "address",
                  omit: 2,
                  returnVal: (value) => {
                    return `详细地址：${value}`;
                  },
                },
              ],
            },
            {
              title: "地址",
              prop: "address",
            },
          ],
        },
        {
          title: "名称111",
          prop: "type",
          show: false,
          renderHeader: () => {
            return (
              <span>
                <span>自定义表头</span>
                <sup>*</sup>
              </span>
            );
          },
          returnVal: (value) => {
            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: 1,
            direction: "top",
          },
        },
        {
          title: "地址",
          prop: "date",
          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: "进行中",
              },
            ],
          },
        },
      ];
    },
    searchOptions() {
      return [
        {
          label: "名称",
          type: "text",
          prop: "name",
        },
        {
          label: "状态",
          type: "select",
          prop: "status",
          options: [
            {
              value: 0,
              label: "未开始",
            },
            {
              value: 1,
              label: "已开始",
            },
            {
              value: 2,
              label: "进行中",
            },
          ],
        },
      ];
    },
  },
  methods: {
    handleChangePage(page) {
      this.list = this.tableData.filter((v, k) => {
        if (k >= (page - 1) * 2 && k < page * 2) {
          return v;
        }
      });
    },
    handleChecked(data) {
      console.log("radio");
      console.log(data);
    },
    select(data) {
      console.log("selected");
      console.log(data);
    },
    search() {
      console.log("search");
    },
  },
};

Table Global Attribute

| 参数 | 说明 | 类型 | | ---------------- | ---------- | ------ | | tableAttrs | 表格属性 | object | | tableColumnAttrs | 单元格属性 | object | | paginationAttrs | 分页属性 | object | | searchAttrs | 搜索属性 | 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) |

Search Attribute

| 参数 | 说明 | 类型 | 可选 | 默认值 | | --------------- | ------------------------------ | --------------------- | -------------------------------------------------- | ------- | | searchOptions | 搜索配置 | array | — | — | | search | 搜索方法,params 返回搜索表单值 | (params: any) => void | — | — | | repeatRequest | 重复触发,默认可重复 | boolean | — | true | | searchText | 搜索按钮文字 | string | — | 搜索 | | searchBtnType | 搜索按钮类型 | string | primary / success / warning / danger / info / text | primary | | resetText | 重置按钮文字 | string | — | 重置 | | resetBtnType | 重置按钮类型 | string | primary / success / warning / danger / info / text | info | | expandHideCount | 搜索框数量超出就显示展开切换 | number | — | — | | searchSize | 搜索组件的 size | string | medium / small / mini | — |

Search Options

| 参数 | 说明 | 类型 | 可选 | 默认值 | | ----------- | ------------------------------------------------------------------- | ------ | ----------------------------------------- | ------ | | label | 标题 | string | — | — | | type | 组件类型 | string | text / number / date / dateRange / select | — | | prop | 字段名 | string | — | — | | value | 默认值 | any | — | — | | placeholder | 占位符 | string | — | — | | options | type="select" 选项数据:[{label: 'label', value: 'value'}] | array | — | — | | handler | 组件事件,例如键盘事件 keyup.13 或者 keyup.enter, onblur、oninput... | array | — | — | | attrs | 额外的属性，根据 element— ui 表单组件属性 | object | — | — |

更新日志

2021 年 09 月 01 日

• 首次提交

2021 年 9 月 7 日

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

2021 年 9 月 15 日

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