Vue-element-easy-search-table NPM

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	—	—