对于elementui中table表格的封装

日常使用中封装的一些组件，正常使用可以，没有达到很完美的状态，日常维护吧，有问题的地方不定时修改吧，这个是基于element-admin封装的自己可以随意的更改（我适配了一些权限以及字体大小的功能）

封装表格组件

<template>
  <!-- 表格内容 -->
  <div class="tablelist">
    <el-table
      :class="{ nullcol: !tablelist.tablestyle.children }"
      @row-click="rowclick"
      ref="tablebox"
      :height="settype(tablelist.tablestyle.height)"
      :data="tablelist.tableData"
      :stripe="tablelist.tablestyle.stripe"
      :border="tablelist.tablestyle.border"
      :highlight-current-row="tablelist.tablestyle.highlight"
      :default-expand-all="tablelist.tablestyle.defaultal"
      :empty-text="tablelist.tablestyle.emptytext"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- 操作按钮的展示 -->
      <el-table-column
        width="30px"
        :type="tablelist.tablestyle.type"
        v-if="tablelist.tablestyle.type != ''"
      />
      <el-table-column width="30px" />
      <el-table-column
        v-for="(item, index) in tablelist.tablehead"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :fixed="item.fixed"
        :width="item.width"
        :show-overflow-tooltip="item.tooltip"
      >
        <template slot-scope="scope">
          <div v-if="!item.scope">{{ scope.row[item.prop] }}</div>
          <div v-if="item.scope">
            <slot :text="item.prop" :scope="scope.row" />
          </div>
        </template>
      </el-table-column>
      <!-- 操作按钮的展示 -->
      <el-table-column
      class-name="table_btnlist"
        :align="tablelist.tablestyle.align"
        :width="tablelist.tablestyle.width"
        label="操作"
        :fixed="tablelist.tablestyle.fixed"
        v-if="tablelist.btnlist.length"
      >
        
        <template slot-scope="scope" >
          <el-button
            v-for="(item, index) in tablelist.btnlist"
            :key="index"
            v-show="judgebtn(scope.row, item)"
            @click.native.stop="btndown(scope, item.hasPermi)"
            :type="item.type"
            :icon="item.icon"
            :round="item.round"
            v-hasPermi="[item.hasPermi]"
            :plain="item.plain"
            >{{ item.name }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tablelist", //表格内容
  props: {
    //
    tablelist: {
      type: [Object], //传入的对象数据
    },
    //传入的判断按钮的函数
    judgebtn: {
      typeof: [Function]
    },
  },
  methods: {
    // 判断undefined转换
    settype(text) {
      if (text === "undefined") {
        return undefined;
      } else {
        return text;
      }
    },
    //   传出当前点击的内容
    btndown(scope, hasPermi) {
      var type = hasPermi.split(":")[2];
      this.$emit("changetype", scope.row, type, this.tablelist.name);
    },
    // 点击哪一行
    rowclick(e) {
      this.$emit("changetype", e, "rowclick", this.tablelist.name);
    },
    // 展开事件
    load(tree, treeNode, resolve) {
      this.$emit("load", tree, treeNode, resolve);
    },
  },
};
</script>

一些参数大家看elementui官方就行

接下来就是使用方法

引入一个json配置就行，因为比较多，注意的是，json文件的修改是全局的，如果多个地方使用的话要记得深拷贝一下**JSON.parse(JSON.stringify(json文件)**这样就行

<template>
  <!-- 某一个通用页面样式 -->
  <div class="pageform" ref="pageform">
    <!-- 表格列表 -->
    <tablelist
      ref="tablelist"
      v-loading="loading"
      :judgebtn="judgebtn"
      :tablelist="tablelist"
      @changetype="changetable"
    >
      <template scope="val">
        <slot name="table" :text="val.text" :scope="val.scope" />
      </template>
    </tablelist>
  </div>
</template>

<script>
// 引入尺寸变化监听
import resize from "element-resize-detector";
export default {
  name: "pageform", //某一个通用页面样式
  data() {
    return {
      loading: true, //加载效果
      tablelist: tablelist, //表格列表
    };
  },
   mounted() {
    // 计算当前表格的剩余高度
    this.getheigtht();
  },
  methods: {
  // 计算当前表格的剩余高度
    getheigtht() {
      // 每次尺寸变化的时候重新设置比例
      resize().listenTo(this.$refs.pageform, (res) => {
        var height =
          res.offsetHeight -40;
        this.setheight(height);
        //这是修改完参数刷新表格的方法
        if (this.$refs.tablelist) {
          this.$refs.tablelist.$refs.tablebox.doLayout();
        }
      });
    },
    //设置表格的高度
    setheight(height) {
      this.tablelist.tablestyle.height = height;
    },
    // 点击表格内的按钮触发
    changetable(scope, type, name) {
      this.$emit("changetype", scope, type, name);
    },
    // 设置按钮样式
    judgebtn(data, item) {
      return true
    },
  },
};
</script>

传入的json是这样

可能有点麻烦，但开发速度开始会节省一点，毕竟ctrl+c,ctrl+v

{
    "tablelist": {
    //表格数组放这里
        "tableData": [],
        //表头
        "tablehead": [
            {
                "prop": "productSn",
                "label": "产品序列号",
                "width": "400",
                "tooltip": false,
                "scope": false,//这是是否使用自定义内容
                "align": "left",
                "fixed": false
            }
        ],
        //这是一些样式包括按钮的
        "tablestyle": {
            "height": "40vh",
            "stripe": false,
            "border": false,
            "highlight": false,
            "defaultal": false,
            "align": "center",
            "children": false,
            "type": "",
            "fixed": "right",
            "width": ""
        },
        //这里是按钮的一些配置
        "btnlist": [
        	 {
                "icon": "",
                "type": "text",
                "name": "修改备注",
                "plain": false,
                "hasPermi": "",
                "round": false
            }
        ]
    }
}

就是这样，下班！！！