博客

组件部分：

<template>
  <div id="tableCol">
    <el-table
      @row-click="clickRow"
      @cell-click="cellClick"
      :cell-class-name="cellClass"
      :ref="tableAll.select ? 'multipleTable' : 'refTable'"
      @selection-change="handleSelectionChange"
      v-loading="tableAll.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      border
      highlight-current-row
      :max-height="tableAll.maxheight"
      :data="tableAll.tableData"
    >
      <el-table-column
        v-if="tableAll.isShowIndex"
        type="index"
        label="序号"
        :fixed="tableAll.indexFixed"
        :index="indexMethod"
      ></el-table-column>
      <el-table-column
        v-if="tableAll.select"
        type="selection"
        width="55"
        :fixed="tableAll.selectFixed"
      ></el-table-column>
      <el-table-column
        v-for="(col, index) in tableAll.cols"
        :key="index"
        :label="col"
        :width="
          tableAll.widthList && tableAll.widthList[index]
            ? tableAll.widthList[index]
            : ''
        "
        :prop="tableAll.proplist[index]"
        :fixed="tableAll.isFixed[index]"
      >
        <!-- 部分需要有插槽，并访问数据，部分不需要 -->
        <template slot-scope="scope">
          <slot :name="tableAll.proplist[index]" :obj="scope">{{
            scope.row[tableAll.proplist[index]]
          }}</slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableAll.isShowPage"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="tableAll.page"
      :page-sizes="tableAll.pageList"
      :page-size="tableAll.pageSize ? tableAll.pageSize : 50"
      :layout="
        tableAll.layoutList
          ? tableAll.layoutList
          : 'total, sizes, prev, pager, next, jumper'
      "
      :total="tableAll.total ? tableAll.total : 0"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  // cols  proplist
  props: {
    tableAll: {
      type: Object,
      default: () => {
        return {
          // 表格
          maxheight: 0,
          tableData: [], // 表格数据
          isShowIndex: true, // 序号
          cols: [], // 表头
          proplist: [], // 表格属性
          isFixed: [], // 必传，否则会报错
          select: false, // 是否有复选框
          indexFixed: false,
          selectFixed: false,
          // 分页
          isShowPage: true, // 显示分页
          isShowSize: true, // 切换页数
          page: 1, // 当前页
          pageList: [], // 页数列表
          pageSize: 50, // 每一个条数
          total: 0, // 总条数
          
          layoutList: "total, sizes, prev, pager, next, jumper" // 展示组件
        };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
  cellClass(obj) {
      // classFun 绑定表格样式方法
      if (
        this.tableAll.classFun &&
        typeof this.tableAll.classFun == "function"
      ) {
        return this.tableAll.classFun(obj);
      }
    },
    // 显示页数
    indexMethod(val) {
      return this.tableAll.isShowPage
        ? val + 1 + (this.tableAll.page - 1) * this.tableAll.pageSize
        : val + 1;
    },
    handleSizeChange(val) {
      // 切换size
      this.$emit("changeSize", val);
    },
    changePage(val) {
      // 切页
      this.$emit("changePage", val);
    },
    // 点击行方法
    clickRow(row, column, event) {
      this.$emit("clickrow", {
        row,
        column,
        event
      });
    },
    // 点击列方法
    cellClick(row, column, cell, event) {
      this.$emit("cellclick", { row, column, cell, event });
    },
    // 切换选中行
    handleSelectionChange(val) {
      this.$emit("SelectionChange", val);
    }
  }
};
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
</style>
<style>
#tableCol .el-pagination {
  background: rgba(255, 255, 255, 0.9);
}
</style>

组件引用部分：

  <!-- table插件使用说明 -->
  <!-- 
    <table-col
     @clickrow="clickRow"
     @tablerow="tableRowClassName"
     :tableAll="tableOpt">
     // 如果表格列中需要插入插槽，如下 slot是对应的表格列属性
      <template slot-scope="data" slot="FBA">
        <el-button type="primary" @click="clicktable(data.obj.row)">{{
          data.obj.row.FBA
        }}</el-button>
      </template>
    </table-col>
 -->
<--  js部分： -->
tableOpt: {
        maxheight: 720,
        tableData: [],
        isFixed: [],
        isShowPage: false,
        cols: ["spu", "类型", "文件", "操作"],
        proplist: ["1", "3", "4", "0"],
		// 需要根据实际操作样式
		classFun: function({ row, column, rowIndex, columnIndex }) {
          if (columnIndex == 7) {
            let ks_days = this.tableData[rowIndex]["ks_days"];
            if (ks_days < 60) {
              return "green";
            } else if (ks_days > 90) {
              return "red";
            } else {
              return "yellow";
            }
          }
        }
      },

<--  html部分： -->
<table-col :tableAll="tableOpt">
      <template slot-scope="data" slot="4">
       {{ data.obj.row["4"]}}
      </template>
      <template slot-scope="data" slot="0">
       {{data.obj.row['0']}}
      </template>
    </table-col>

结合el-form表单验证：

//  addTableOpt ： 组件表格数据
 <el-form class="addTable" ref="addForm" :model="addTableOpt">
          <table-col
            @tablerow="addTableRowClassName"
            @SelectionChange="AddSelectionChange"
            :tableAll="addTableOpt"
          >
            <template slot-scope="scope" slot="propname">
            // prop 不能直接写成 ‘propname’
              <el-form-item
                :prop="`tableData[${scope.obj.$index}]['propname']`"
                :rules="rules['propname']"
              >
                <el-input v-model="scope.obj.row.propname"></el-input>
              </el-form-item>
            </template>
          </table-col>
        </el-form>

// rules 验证

propname: [
          { required: true, message: "propname不能为空", trigger: "blur" },
          {
            pattern: /^[1-9][0-9]*$/g,
            message: "请输入大于0的整数",
            trigger: "blur"
          }
        ],