element-UI table封装

element-ui表格很强，但是业务需求更强大，需要表格整列移动，并且整列隐藏

 

<template>
 <div>
    <div class="popoverStyle">
      <el-popover placement="bottom" trigger="click">
        <el-col :span="20">
          <h4>请选择需要隐藏的内容</h4>
        </el-col>
        <el-col :span="12" v-for="(item,index) in _col" :key="index">
          <el-checkbox
            :value="item.isHidden"
            @change="(val) => {showHide(item, index, val);}"
          >{{item.label}}</el-checkbox>
        </el-col>
        <el-button
          slot="reference"
          type="primary"
          plain
          class="setting"
          style="margin:0 5px 0 5px"
        >设置</el-button>
      </el-popover>
      <el-button type="primary" @click="saveAry" plain>保存设置</el-button>
    </div>
    <div class="tableCommon">
      <el-table
        max-height="600px"
        highlight-current-row
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-class-name="cellClassName"
        :header-cell-class-name="headerCellClassName"
        @header-dragend="change()"
        class="drag_table"
        :row-class-name="tableRowClassName"
        @selection-change="changeFun"
        v-loading="loading"
        element-loading-text="加载中..."
        :header-cell-style="{background:'rgb(238, 241, 246)',color:'rgb(96, 98, 102)'}"
        border
        @row-click="clickSelect"
        :cell-style="changeColor"
      >
        <slot></slot>
        <el-table-column
          v-for="(_col, index) in _tableHeader"
          :key="index"
          :prop="_col.prop"
          :label="_col.label"
          :column-key="index.toString()"
          :render-header="renderHeader"
          :show-overflow-tooltip="true"
          v-if="!col_hide_flat[ index]"
          min-width="50px"
          align="center"
          sortable
        ></el-table-column>
      </el-table>
    </div>
 </div>
</template>

<script>
import Cookies from "js-cookie";
import { bus } from "../../bus";
import TAPI from "../../api/api_table_define";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "table123",
  props: {
    tableData: {
      default: []
    },
    tableHeader: {
      default: []
    },
    col: {
      default: []
    }
  },

  data() {
    return {
      clickSelectList: {}, //行点击
      userId: null,
      tableName: "",
      _tableHeader: [],
      _col: [],
      loading: false,
      deep_clone_ary: [],
      col_hide_flat: [], //活动表头，隐藏表头
      checkBoxData: [],
      dragState: {
        startIndex: -1, // 拖动起始元素的index
        endIndex: -1, // 拖动结showHide束元素的index
        afterMoveIndex: -1, // 拖动后元素的index
        dragging: false, // 是否正在拖动
        direction: null, // 拖动方向
        moveTableOutsideBack: false // 拖出到table外之后又拖回来
      },
      userInfo: {
        userId: null,
        username: "",
        name: "",
        enterpriseId: 0,
        enterpriseName: ""
      }
    };
  },
  methods: {
    // 行点击
    clickSelect(val) {
      this.clickSelectList = val;
      bus.$emit("clickSelect", this.clickSelectList);
    },
    init() {
      let param = {
        tableName: this.tableName,
        userId:this.userId
      };
      TAPI.list(param)
        .then(
          rel => {
            // console.log(rel, 111);
            if (rel.code == 0 && rel.list.length > 0) {
              let newtable = [];
              let table = rel.list;
              table.forEach(item => {
                let entity = {
                  prop: item.columnName,
                  label: item.columnComment,
                  isHidden: item.isHidden == 2 ? true : false,
                  checked: item.isHidden == 2 ? true : false
                };
                newtable.push(entity);
              });
              this._tableHeader = newtable;
              this._col = newtable;
              // console.log(this._col,3333333333333333);
              let num = 0;
              this._tableHeader.forEach(e => {
                this.$set(this.col_hide_flat, num, e.isHidden);
                num++;
              });
            }
          },
          err => {
            this.$message.error({
              showClose: true,
              message: "数据异常",
              duration: 2000
            });
          }
        )
        .catch(error => {
          this.$message.error({
            showClose: true,
            message: "请求出现异常",
            duration: 2000
          });
        });
    },
    saveAry() {
      this.deep_clone_ary = [];
      // console.log(this._tableHeader,12121);
      let num = 1;
      this._tableHeader.forEach(item => {
        let entity = {
          tableName: this.tableName,
          columnName: item.prop,
          columnComment: item.label,
          sort: num,
          isHidden: item.isHidden == true ? 2 : 1,
          userId: this.userId
        };
        this.deep_clone_ary.push(entity);
        num++;
      });
      TAPI.insertBatch(this.deep_clone_ary)
        .then(
          result => {
            if (result.code === 0) {
              this.$confirm("保存成功", "提示", {
                type: "success",
                center: true,
                showCancelButton: false
              });
              this.init();
              this.$message.success({
                message: result.msg,
                duration: 2000
              });
            }
          },
          err => {
            this.$message.error({
              showClose: true,
              message: "数据异常",
              duration: 2000
            });
          }
        )
        .catch(error => {
          this.$message.error({
            showClose: true,
            message: "请求出现异常",
            duration: 2000
          });
        });
    },
    changeFun(val) {
      this.checkBoxData = val;
      bus.$emit("checkBoxData", this.checkBoxData);
    },
    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    //隐藏表格头
    showHide(show, _index, val) {
      this.$set(this.col_hide_flat, _index, val);
      // console.log(_index, val,'val');
      this._tableHeader[_index].isHidden = val;
      this._col[_index].isHidden = val;
      return;
    },
    /*
     * @params:
     * Description: 表格拖动
     */
    // drag_table在渲染表头时调用
    renderHeader(h, { column, $index }) {
      // 这里可以根据$index的值来对自身需求进行修改，
      return h(
        "span",
        {
          class: ["thead-cell"],
          style: {
            // display: "block",
            // width: "40px",
            cursor: "move"
          },
          on: {
            mousedown: $event => {
              this.handleMouseDown($event, column);
            },
            mouseup: $event => {
              this.handleMouseUp($event, column);
            },
            mousemove: $event => {
              this.handleMouseMove($event, column);
            }
          }
        },
        [
          h("span", [
            // 给每个表头添加icon 可以不需要
            h("span"),
            h("span", column.label)
          ]),
          // 给每个表头添加一个class=virtual 是画虚线的类名。
          h("span", {
            class: ["virtual"]
          })
        ]
      );
    },
    // 按下鼠标开始拖动 设置列的背景色
    handleMouseDown(e, column) {
      // 判断是鼠标左键
      if (e.button === 0) {
        this.dragState.dragging = true;
        this.dragState.startIndex = parseInt(column.columnKey);
        // 给当前要拖动列的th设置class
        document.querySelectorAll(".drag_table table thead tr th")[
          this.dragState.startIndex
        ].className += " " + "dragging_column";
        // 给拖动时的虚拟容器添加宽高
        let table = document.getElementsByClassName("drag_table")[0];
        let virtual = document.getElementsByClassName("virtual");
        // 设置新插入的span.virtual的标签 每一列的宽度、高度
        for (let item of virtual) {
          item.style.height = table.clientHeight - 10 + "px";
          item.style.width =
            item.parentElement.parentElement.clientWidth + "px";
        }
        this.dragState.moveTableOutsideBack = false;
      }
    },
    // 拖动中
    handleMouseMove(e, column) {
      // 判断是鼠标左键
      if (e.button === 0) {
        if (this.dragState.dragging) {
          let currentIndex = parseInt(column.columnKey); // 拖动的当前列index
          if (currentIndex !== this.dragState.startIndex) {
            this.dragState.direction =
              currentIndex - this.dragState.startIndex < 0 ? "left" : "right"; // 判断拖动方向
            this.dragState.afterMoveIndex = currentIndex;
          } else {
            this.dragState.direction = null;
          }
        } else {
          return false;
        }
      }
    },
    // 鼠标放开结束拖动
    handleMouseUp(e, column) {
      // 判断是鼠标左键
      if (e.button === 0) {
        // 拖出当前table外之后又拖回来，不再进行易位操作（拖出去时已处理）
        if (this.dragState.moveTableOutsideBack) {
          return false;
        } else {
          this.dragState.endIndex = parseInt(column.columnKey); // 记录结束列index
          if (this.dragState.startIndex !== this.dragState.endIndex) {
            this.dragColumn(this.dragState);
          }
          this.finishDragInit();
        }
      }
      // console.log(this.dragState.endIndex, 'drageStar')
    },
    // 拖动到当前table之外的处理
    moveTableOutside() {
      if (this.dragState.dragging) {
        this.dragState.endIndex = this.dragState.startIndex;
        if (this.dragState.startIndex !== this.dragState.endIndex) {
          this.dragColumn(this.dragState);
        }
        this.finishDragInit();
        this.dragState.moveTableOutsideBack = true;
      }
    },
    // 拖动易位
    dragColumn({ startIndex, endIndex, direction }) {
      // 排除掉鼠标点击table外面，然后拖入进table报错
      if (startIndex < 0) {
        return;
      }
      // 判断是向左移动还是向右移动
      // 把移动的列插在某个列前面或者后面，然后在删除移动的列
      if (direction === "left") {
        this._tableHeader.splice(endIndex, 0, this._tableHeader[startIndex]);
        this._tableHeader.splice(startIndex + 1, 1);
      } else {
        this._tableHeader.splice(
          endIndex + 1,
          0,
          this._tableHeader[startIndex]
        );
        this._tableHeader.splice(startIndex, 1);
      }
      // console.log(startIndex, ';endIndex');
      // console.log(startIndex, ';endIndex');
    },
    // 拖动完成后的初始化
    finishDragInit() {
      // 给当前要拖动列的th取消class
      for (var item of document.querySelectorAll(
        ".drag_table table thead tr th"
      )) {
        item.className = String(item.className)
          .split("dragging_column")
          .join("");
      }
      // 再次初始化拖动状态
      this.dragState = {
        startIndex: -1,
        endIndex: -1,
        afterMoveIndex: -1,
        dragging: false,
        direction: null,
        moveTableOutsideBack: false
      };
    },
    headerCellClassName({ column, columnIndex }) {
      return columnIndex === this.dragState.afterMoveIndex
        ? `drag_active_${this.dragState.direction}`
        : "";
    },
    // 动态给表头单元格th添加class，实现拖动中的背景
    cellClassName({ column, columnIndex }) {
      return columnIndex === this.dragState.startIndex ? `dragging_column` : "";
    },
    change() {},
    //改变颜色
    changeColor(row, column, rowIndex, columnIndex) {
      if (
        (row.column.label == "证照状态" && row.row.certificateStatus == "3") ||
        (row.column.label == "证照状态" && row.row.certificateStatus == "1")  ||
        (row.column.label == "审核状态" && row.row.auditStatus == '3')||
        (row.column.label == "使用状态" && row.row.status == '2')||
        (row.column.label == "耗材状态" && row.row.consumeStatus == '2')||
        (row.column.label == "证照状态" && row.row.authorizationStatus == '3')||
        (row.column.label == "证照状态" && row.row.authorizationStatus == '1')||
        (row.column.label == "证照状态" && row.row.proxyStatus == '3')||
        (row.column.label == "证照状态" && row.row.proxyStatus == '1')||
        (row.column.label == "审核状态" && row.row.verifyStatus == '3')||
        (row.column.label == "审核状态" && row.row.verifyStatus == '3')||
        (row.column.label == "供应关系状态" && row.row.supplierrelationshipstatus == '2')||
        (row.column.label == "供应关系状态" && row.row.materialrelationshipstatus == '2')||
        (row.column.label == "状态" && row.row.status == '2')||
        (row.column.label == "消息状态" && row.row.status == '2')||
        (row.column.label == "发布状态" && row.row.status == '3')||
        (row.column.label == "推送状态" && row.row.messageStatus == '3')

      ) {
        return "color:red";
      }else {

      }
    },
  },
  created() {
    this.col_hide_flat.length = 100;
    this._tableHeader = this.tableHeader;
    this._col = this.col;
  },
  mounted() {
    this.userInfo = JSON.parse(Cookies.get("userInfo"));
    this.userId = this.userInfo.userId;
    this.tableName = this.$route.path
      .substring(11)
      .replace(/\//g, "-")
      .replace(/\+/g, "-");
    this.init();
  }
};
</script>

<style>
.popoverStyle {
  /*display: flex;*/
  /*border: 1px solid red;*/
  display: block;
  margin-bottom: 10px;
}
.el-table__body tr.current-row > td {
  #fca454 !important;
  color: #333333;
}
.tableCommon {
  width: 100%;
}
</style>

 

引入表格使用

import myTable from "../commonComponents/table";
components: { "my-table": myTable },
<my-table :table-data="表格数据" :tableHeader="tableHeader" :col="col"></my-table>
//表格头
  tableHeader: [
        {
          label: "流水",
          prop: "productCode",
          showif: "show_productCode",
          isHidden: false
        },
        {
          label: "最",
          prop: "most",
          showif: "show_most",
          isHidden: false
        },
        {
          label: "时间",
          prop: "time",
          showif: "show_time",
          isHidden: false
        }
      ],
//隐藏头
      col: [
        {
          label: "流水",
          prop: "productCode",
          showif: "show_productCode",
          isHidden: false
        },
        {
          label: "最",
          prop: "most",
          showif: "show_most",
          isHidden: false
        },
        {
          label: "时间",
          prop: "time",
          showif: "show_time",
          isHidden: false
        }
      ]