element ui 表格基于vue的二次封装

二次封装原因

1、表格一般使用起来有大部分都是重复的代码，比如el-table-column标签的书写、分页的调用等等。
2、在团队写前端代码时，针对表格每个人都有不同的写法，为了将常见的组件风格保持一致。

二次封装代码

废话不多说，直接上代码。

<template>
  <div class="c-table">
    <!-- 2.表格 -->
    <a-spin :spinning="spinning">
      <div class="opre-box" v-if="btnOperate">
        <div>
          <slot name="slot1"></slot>
        </div>
        <a-popover
          trigger="click"
          v-if="filterCloumn"
          placement="bottomRight"
          overlayClassName="pop-box"
        >
          <template slot="content">
            <a-checkbox-group
              @change="onChange"
              v-model="selectedColumn"
              :defaultValue="selectedColumn"
            >
              <div v-for="item in column">
                <a-tooltip :title="item.name">
                  <a-checkbox :value="item.value">{{ item.name }}</a-checkbox>
                </a-tooltip>
              </div>
            </a-checkbox-group>
          </template>
          <div class="column-pop" @click="showColumm = !showColumm">
            <a-icon type="bars" />
            <a-icon :type="showColumm ? 'up' : 'down'" class="icon" />
          </div>
        </a-popover>
      </div>
      <el-table
        :highlight-current-row="radio"
        :data="tabledata.data"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChange"
        @sort-change="sortChange"
        :border="true"
        resizable
        tooltip-effect="dark"
        :height="height"
        ref="cTable"
      >
        <el-table-column type="selection" v-if="selection" width="35" />
        <el-table-column
          label="序号"
          type="index"
          v-if="index.show"
          :fixed="index.fixed"
          width="50"
        />
        <template v-for="(item, index) in column">
          <el-table-column
            :key="index"
            :prop="item.value"
            :width="typeof item.width === 'undefined' ? '' : item.width"
            :label="item.name"
            :sortable="item.sortable ? 'custom' : false"
            v-if="selectedColumn.indexOf(item.value) > -1"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <expand
                v-if="item.render"
                :render="item.render"
                :row="scope.row"
                :index="index"
                :column="item"
              ></expand>
              <span v-else>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- <slot v-if="operate" name="slot"></slot> -->
        <el-table-column
          v-if="operate.show"
          :label="operate.title ? operate.title : '操作'"
          :width="typeof operate.width === 'undefined' ? 120 : operate.width"
          :fixed="operate.fixed"
        >
          <template slot-scope="scope">
            <slot :row="scope.row" name="slot2"></slot>
          </template>
        </el-table-column>
      </el-table>
    </a-spin>
    <!-- 3.表格分页 -->
    <el-pagination
      v-if="tabledata.meta.total > 0"
      :current-page="tabledata.meta.currentPage"
      :total="tabledata.meta.total"
      :page-size="tabledata.meta.pageSize"
      :page-sizes="[10, 20, 40, 60, 80, 100]"
      @size-change="handelSizeChange"
      @current-change="handelCurrentChange"
      layout="total,sizes,prev,pager,next,jumper"
    ></el-pagination>
    <div class="table-operation-title" v-if="tabledata.meta.total > 0">
      <span class="show">每页展示</span>
      <span>
        <a-button type="primary" class="show-btn">确定</a-button>
      </span>
    </div>
  </div>
</template>

<script>
import expand from "./expand";
export default {
  //tabledata:表格数据,column:父组件中传过来的需要进行筛选的表格列,用于筛选气泡框的数据渲染
  props: {
    tabledata: {
      type: Object,
      required: true
    },
    column: {
      type: Array,
      required: true
    },
    selection: {
      type: Boolean,
      default: true
    },
    //高亮单选
    radio: {
      type: Boolean,
      default: false
    },
    spinning: {
      type: Boolean,
      default: false
    },
    height: {
      default: null
    },
    //序号
    index: {
      type: Object,
      default: () => {
        return {
          fixed: false,
          show: false,
          title: "操作"
        };
      }
    },
    //操作
    operate: {
      type: Object,
      default: () => {
        return {
          fixed: false,
          show: false,
          wdith: 120
        };
      }
    },
    //是否显示表格上方一行操作项
    btnOperate: {
      type: Boolean,
      default: true
    },
    //是否显示表格右上方字段显示按钮
    filterCloumn: {
      type: Boolean,
      default: true
    }
  },
  components: { expand },
  data() {
    return {
      // 一:表格相关的数据
      multipleSelection: [], //表格选择框选择的数据
      showColumm: false,
      selectedColumn: [] //表格中被选中列
    };
  },

  methods: {
    //一.表格选择框选中所触发的事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("coloumSelect", val);
    },

    //表格单选触发
    handleCurrentChange(val) {
      if (this.radio) {
        this.$emit("coloumCurrent", val);
      }
    },
    //二.分页相关的方法
    handelSizeChange(val) {
      this.tabledata.meta.pageSize = val;
      this.handelCurrentChange();
    },
    handelCurrentChange(val) {
      this.tabledata.meta.currentPage = typeof val == "undefined" ? 1 : val;
      this.$emit("queryData");
    },

    // 2.筛选表格列的选择框默认全选中
    init() {
      this.column.forEach(item => {
        this.selectedColumn.push(item.value);
      });
    },
    /**
     * @Author: liu.yihu
     * @des: 远程排序
     * @param {type}
     * @return:
     */
    sortChange(column) {
      this.tabledata.meta.field = column.prop;
      this.tabledata.meta.sort = column.order == "ascending" ? "asc" : "desc";
      this.$emit("queryData");
    },
    //3.表格列的筛选
    onChange(checkedValues) {
      this.selectedColumn = checkedValues;
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>

expand.js

export default {
  name: 'expand',
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index,
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render(h, params)
  },
}

使用方式

template代码

 <c-table
      :tabledata="tableData"
      :column="column"
      @queryData="queryData"
      :operate="{show:true}"
      :spinning="spinning"
      :selection="true"
    >
      <template slot-scope="scope" slot="slot2">
        <div class="operation-btn">
          <a-tooltip>
            <template slot="title">接收报文</template>
            <a-icon type="select" class="select-icon" @click="clickAccept(scope.row)" />
          </a-tooltip>
          <a-tooltip>
            <template slot="title">返回报文 </template>
            <a-icon type="rollback" class="rollback-icon" @click="clickBack(scope.row)" />
          </a-tooltip>
        </div>
      </template>
    </c-table>

列render渲染

  column: [
        {
          value: "ewsId",
          name: "工单编号",
          sortable: true,
          render: (h, params) => {
            return h(
              "router-link",
              {
                props: {
                  to: {
                    name: "AOorderDetail",
                    params: {
                      order: params.row
                    }
                  }
                },
              },
              params.row.ewsId
            );
          }
        },
        { value: "oldOrderId", name: "原工单号", sortable: true },
        { value: "productName", name: "产品名称", sortable: true },
        { value: "createTime", name: "创建时间", sortable: true },
        { value: "updateTime", name: "更新时间", sortable: true }
      ],

注意：表格查询方法未封装在表格组件中，需在各个vue文件中重新声明，感兴趣的同学可以将查询方法也封装在表格组件中。