element table 组件

功能：1.根据底部运行低、高。。。的颜色来展示表格数据在那个颜色

测试（http://10.0.16.47:8001/#/login）

           2.实现表头拖拽                

    

      v-loading="loading"

      element-loading-text="拼命加载中"

      element-loading-spinner="el-icon-loading"

      element-loading-background="rgba(0, 0, 0, 0.8)"

      :data="tableData"

      stripe

      border

      :height="height"

      class="drag_table"

      @sort-change="handleSortChange"

      @row-contextmenu="rowContextmenu"

      @header-dragend="headerDragend"

      @row-dblclick="handleRowDblClick"

    >

      

    

    

      :current-page="currentPage"

      :page-sizes="pageSizes"

      :page-size="pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

    />

  

script

import ColumnTree from './ColumnTree'

export default {

  name: 'DynamicTable',

  components: {

    ColumnTree

  },

  props: {

    tableColumns: {

      // 表头

      type: Array,

      default: function() {

        return []

      }

    },

    tableData: {

      // 表格数据

      type: Array,

      default: function() {

        return []

      }

    },

    height: {

      // 表格高度

      type: Number,

      default: 800

    },

    pageSizes: {

      // 每页显示个数选择器的选项设置

      type: Array,

      default: function() {

        return [20, 50, 100, 200]

      }

    },

    pageSize: {

      // 每页显示条目个数，支持 .sync 修饰符

      type: Number,

      default: 20

    },

    total: {

      // 总条数

      type: Number,

      default: 0

    },

    showTableExtensions: {

      // 是否显示表格扩展功能

      type: Boolean,

      default: false

    },

    loading: {

      // 显示正在加载状态

      type: Boolean,

      default: false

    }

  },

  data() {

    return {

      data: [],

      pagination: {

        Page: 1,

        PageSize: this.pageSize,

        SortName: '',

        SortType: ''

      },

      pageOrder: 'ascending', // 排序

      currentPage: 1, // 当前页

      sortColumn: '', // 排序字段

      tableColumnsCopy: [],

      key: 1, // table key

      dragState: {

        startIndex: -1, // 拖动起始元素的index

        endIndex: -1, // 拖动结束元素的index

        afterMoveIndex: -1, // 拖动后元素的index

        dragging: false, // 是否正在拖动

        direction: null, // 拖动方向

        moveTableOutsideBack: false // 拖出到table外之后又拖回来

      }

    }

  },

  computed: {},

  watch: {

    tableColumns: {

      handler: function(val) {

        this.tableColumnsCopy = val

      },

      immediate: true

    },

    tableData(val) {

      // console.log(val)

      // const idArr = [];

      // val.forEach(element => {

      //   for (var item in element) {

      //     const cell = element[item];

      //     if (cell && typeof cell === "object") {

      //       idArr.push(cell.RealValue);

      //     }

      //   }

      // });

    }

  },

  created() {},

  methods: {

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      // console.log(row, column, rowIndex, columnIndex)

      if (columnIndex < 2) {

        if (rowIndex % 2 === 0) {

          return {

            rowspan: 2,

            colspan: 1

          }

        } else {

          return {

            rowspan: 0,

            colspan: 0

          }

        }

      }

    },

    spliceHead(start, end) {

      this.tableColumnsCopy.splice(end, 0, this.tableColumnsCopy[start])

      this.tableColumnsCopy.splice(start + 1, 1)

    },

    spliceHeadRight(start, end) {

      this.tableColumnsCopy.splice(end + 1, 0, this.tableColumnsCopy[start])

      this.tableColumnsCopy.splice(start, 1)

    },

    cleanDragState() {

      // 再次初始化拖动状态

      this.dragState = {

        startIndex: -1, // 拖到的起始index

        endIndex: -1,

        afterMoveIndex: -1,

        dragging: false, // 是否拖到

        direction: null, // 拖到方向

        moveTableOutsideBack: false

      }

    },

    // 改变页尺寸时触发

    handleSizeChange(val) {

      this.pagination.PageSize = val

      this.emitPagination()

    },

    // 改变当前页时触发

    handleCurrentChange(val) {

      // this.pagination.Page = val

      // this.emitPagination()

      this.$emit('handleCurrentChange', val)

    },

    // 自定义排序

    handleSortChange(data) {

      this.pagination.SortName = data.prop

      if (data.column) {

        // 有排序

        this.pagination.SortType = data.order === 'ascending' ? 'asc' : 'desc'

        this.emitPagination()

      } else {

        // 无排序，使用默认排序

        this.pagination.SortType = 'asc'

        this.pagination.SortName = ''

        this.emitPagination()

      }

    },

    // 表格双击事件

    handleRowDblClick(row, column, event) {

      this.$emit('handleRowDblClick', row, column.property, event)

    },

    // 数据刷新

    emitPagination() {

      // 父组件处理分页，向其传递分页参数

      this.$emit('handlePageChange', this.pagination)

    },

    rowContextmenu(row, event, MouseEvent) {

      // 父组件处理右键菜单，向其传递右键菜单参数

      this.$emit('getContextMenu', row, event, MouseEvent)

    },

    headerDragend(newWidth, oldWidth, column) {

      // 用户改变表头宽度时触发

      this.$emit('headerDragend', { width: newWidth, prop: column.property })

    }

  }

}

表头组件columnTree

    :label="columnData.name"

    :prop="columnData.columnName ? columnData.columnName : ''"

    :width="columnData.width"

    :column-key="keyIndex.toString()"

    :resizable="columnData.draggle"

    header-align="center"

    align="center"

    :render-header="renderHead"

  >

    

      

        

          v-for="(item, index) in row.pointDetailList"

          v-show="item.columnName === columnData.columnName"

          :key="item.value + index"

          class="dd"

          :class="getDynamicCellClass(item)"

        >

          {{ item.value }}