1. Home
  2. vue-element-easy-search-table

vue-element-easy-search-table

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 日

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

© 2023 Vuejscomponent All Rights Reserved

Introducing a blog that delves into the exciting world of Vue.js components. Stay tuned for insightful examples and valuable insights that will elevate your Vue.js development skills.