更新记录

1.0.0（2023-07-06） 下载此版本

vue2 elementui table表格二次封装

平台兼容性

useTable

vue2-elementui-table表格组件二次封装

使用需要搭配elementui框架

属性说明

使用示例

    <useTable
      :httprequest="httprequest"
      ref="useTable"
      :headerList="headerData"
       :onEvents="onEvents"
        :propsObj="{ stripe: true }"
    ></useTable>

import useTable from "@/components/use-table/useTable.vue";
export default {
  components: {
    useTable
  },
  data() {
    return {
     headerData:[
        {
          props: {
            label: "",
            type: "selection", //多选
            width: 80,
          },
        },
        props: {
            type: "index",
            width: 100,
        },
        {
          props: {
            prop: "id", //数据参数
            label: "ID", //表头数据
            width: 50 //表格列所占宽度
          },
        },
        {
          props: {
            prop: "name", //数据参数
            label: "名称", //表头数据
            width: 50, //表格列所占宽度
            "show-overflow-tooltip": true, //单行显示文字超出...省略，鼠标滑过弹窗形式展示全部内容
          },
        },
        { //展示的数据过多时可以使用render展示
          props: {
            prop: "",
            label: "已使用/已领取/总数",
            width: 150,
          },
          render: (h, scope) => {
            return (
              <div style="display:flex;">
                <span>{scope.row.use_count}/</span>
                <span>{scope.row.receive_count}/</span>
                <span>{scope.row.total_count}</span>
              </div>
            );
          },
        },
        {//render中也可以写组件
          props: {
            prop: "type_fomat",
            label: "课程",
            width: 300,
          },
          render: (h, scope) => {
            return (
              <div>
                <courseInfo
                  content={{
                    cover: scope.row.head_imgs[0],
                    title: scope.row.title,
                    price: scope.row.sale_price,
                    time: scope.row.created_time,
                  }}
                ></courseInfo>
              </div>
            );
          },
        },
        {
          props: {
            prop: "",
            label: "操作",
            width: 100,
          },
          render: (h, scope) => {
            return (
              <div class="button_warp">
                <div
                  class="line_button"
                  onClick={this.handleEdits.bind(
                    this,
                    scope.row.id,
                  )}
                >
                  编辑
                </div>
                <div
                  class="line_button"
                  onClick={this.handleDeletes.bind(
                    this,
                    scope.row
                  )}
                >
                  删除
                </div>
              </div>
            );
          },
        },
     ],
      searchParams: {
        limit: 10,
        page: 1,
      },
    }
  },
  methods:{
     async httprequest(params) {
        let _this = this;
      this.searchParams = params;
      let res = await this.xxxx(params);
      _this.select_ids.forEach((item) => {
        data.forEach((val) => {
          if (val.id == item) {
            console.log(_this.tableRef, val, "useTableRun.value.");
            _this.$nextTick(() => {
              _this.$refs.useTable.$children[0].toggleRowSelection(val, true);
            });
          }
        });
      });
      let keys = {
        data: res.list,
        total: res.count,
      };
      return keys;
    },
    onEvents() {
      return {
        "selection-change": (e) => {
          e.forEach((item) => {
            let index = this.select_ids.findIndex((ite) => {
              return ite == item.id;
            });
            if (index == -1) {
              this.select_ids.push(item.id);
              this.selectInfos.push(item)
            }
          });
        },
      };
    },
  }
}

效果图

暂无