vsyswin-ui 0.3.1 → 0.3.21

package/packages/table/src/table.vue

@@ -1,589 +1,540 @@
 <template>
-    <div class="syswin-table" style="position: relative;" :style="{height}">
-        <!--筛选下拉-->
-        <drag-set v-if="showDragSet" :listConf='columnList' @save="dragChange" />
-        <el-table
-            border
-            stripe
-            class="cusTable"
-            :row-key="rowKey"
-            :show-summary="showSummary"
-            :summary-method="customSum ? getSummaries : getSummariesNum"
-            ref="cusTable"
-            height='100%'
-            :indent="indent"
-            :lazy="lazy"
-            :load="load"
-            :tree-props="treeProps"
-            v-bind="attrs"
-            :default-expand-all="defaultExpandAll"
-            :expand-row-keys="expandRowKeys"
-            @sort-change="handleSortChange"
-            @selection-change="handleSelectionChange"
-            @select-all="handleSelectAll"
-            @select="handleSelect"
-            @expand-change="handleExpandChange"
-            @header-dragend="handleHeaderDragend"
-        >
-            <slot name="start"></slot>
-            <el-table-column
-                v-for="(item, index) in columnData"
-                :key="item.prop + index"
-                :prop="item.prop"
-                :label="item.label"
-                :width="item.width || 'auto'"
-                :min-width="item.minWidth"
-                :fixed="item.fixed"
-                :align="item.align"
-                :sortable="item.sortable"
-                :show-overflow-tooltip="item.tooltip"
-                :resizable="item.resizable"
-                :header-align="item.headerAlign"
-            >
-                <template #header>
-                    <template v-if="!item.slotHeader">
-                        <span v-if="!item.filterType">{{item.label}}</span>
-                        <span v-else>
-                            {{item.label}}
-                            <!-- 多选 -->
-                            <el-popover
-                                v-if="item.filterType === 'multiple'"
-                                placement="bottom"
-                                :ref="`${item.prop}`"
-                                v-model="item.visible"
-                                trigger="click"
-                                width="160">
-                                <div style="max-height:300px;overflow: auto;">
-                                    <el-checkbox-group v-model="item.value">
-                                        <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
-                                            <el-checkbox :label="x.value">{{x.label}}</el-checkbox>
-                                        </div>
-                                    </el-checkbox-group>
-                                </div>
-                                <div style="text-align: center;margin-top:10px">
-                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
-                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
-                                </div>
-                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
-                            </el-popover>
-                            <!-- 日期选择 -->
-                            <el-popover
-                                v-else-if="item.filterType === 'daterange'"
-                                placement="bottom"
-                                :ref="`${item.prop}`"
-                                v-model="item.visible"
-                                trigger="click"
-                                width="360">
-                                <el-date-picker
-                                    v-model="item.value"
-                                    type="daterange"
-                                    size="small"
-                                    range-separator="至"
-                                    start-placeholder="开始日期"
-                                    end-placeholder="结束日期">
-                                </el-date-picker>
-                                <div style="text-align: center;margin-top:10px">
-                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
-                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
-                                </div>
-                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
-                            </el-popover>
-                            <!-- 月份选择 -->
-                            <el-popover
-                                v-else-if="item.filterType === 'monthrange'"
-                                placement="bottom"
-                                :ref="`${item.prop}`"
-                                v-model="item.visible"
-                                trigger="click"
-                                width="300">
-                                <el-date-picker
-                                    v-model="item.value"
-                                    type="monthrange"
-                                    size="small"
-                                    range-separator="至"
-                                    start-placeholder="开始月份"
-                                    end-placeholder="结束月份">
-                                </el-date-picker>
-                                <div style="text-align: center;margin-top:10px">
-                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
-                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
-                                </div>
-                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
-                            </el-popover>
-                            <!-- 输入框 -->
-                            <el-popover
-                                v-else-if="item.filterType === 'text'"
-                                placement="bottom"
-                                :ref="`${item.prop}`"
-                                v-model="item.visible"
-                                trigger="click"
-                                width="160">
-                                <el-input v-model="item.value" clearable size="small"></el-input>
-                                <div style="text-align: center;margin-top:10px">
-                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
-                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
-                                </div>
-                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value}" @click.stop=""></i>
-                            </el-popover>
-                            <!-- 单选 -->
-                            <el-popover
-                                v-else-if="item.filterType === 'single'"
-                                placement="bottom"
-                                :ref="`${item.prop}`"
-                                v-model="item.visible"
-                                trigger="click"
-                                width="160">
-                                <div style="max-height:300px;overflow: auto;">
-                                    <el-radio-group v-model="item.value">
-                                        <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
-                                            <el-radio :label="x.value">{{x.label}}</el-radio>
-                                        </div>
-                                    </el-radio-group>
-                                </div>
-                                <div style="text-align: center;margin-top:10px">
-                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
-                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
-                                </div>
-                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value || item.value === 0}" @click.stop=""></i>
-                            </el-popover>
-                        </span>
-                    </template>
-                    <!-- 自定义表头 -->
-                    <slot v-else :name="item.slotHeader"></slot>
-                </template>
-                <template slot-scope="scope" >
-                    <span v-if="!item.slotCell" :style="item.style" @click="handleColumnClick(scope.row, item)">
-                        {{transContent(scope.row, item.prop) || '-'}}
-                    </span>
-                    <!--自定义表格内容-->
-                    <slot v-else :name="item.slotCell" :row="scope.row" :index="scope.$index"></slot>
-                </template>
-            </el-table-column>
-            <!-- 自定义表尾列 -->
-            <slot name="end"></slot>
-            <div slot="empty" class="empty" style="margin-top:22px;">
-                <noData></noData>
-            </div>
-        </el-table>
-        <div class="sum" v-if="customSum">
-            <slot name="customSum"></slot>
-        </div>
-        <el-dropdown class="sum" @command="changeSumType" v-if="showSummary && data.length && !customSum">
-            <span class="el-dropdown-link">
-                {{totalText[sumType]}}<i class="el-icon-arrow-down el-icon--right"></i>
+  <div class="syswin-table" style="position: relative;" :style="{ height }">
+    <!--筛选下拉-->
+    <drag-set v-if="showDragSet" :listConf='columnList' @save="dragChange" />
+    <el-table border stripe class="cusTable" :row-key="rowKey" :show-summary="showSummary" size="medium"
+      :summary-method="customSum ? getSummaries : getSummariesNum" ref="cusTable" height='100%' :indent="indent"
+      :lazy="lazy" :load="load" :tree-props="treeProps" v-bind="attrs" :default-expand-all="defaultExpandAll"
+      :expand-row-keys="expandRowKeys" @sort-change="handleSortChange" @selection-change="handleSelectionChange"
+      @select-all="handleSelectAll" @select="handleSelect" @expand-change="handleExpandChange"
+      @header-dragend="handleHeaderDragend">
+      <slot name="start"></slot>
+      <el-table-column v-for="(item, index) in columnData" :key="item.prop + index" :prop="item.prop" :label="item.label"
+        :width="item.width || 'auto'" :min-width="item.minWidth" :fixed="item.fixed" :align="item.align"
+        :sortable="item.sortable" :show-overflow-tooltip="item.tooltip" :resizable="item.resizable"
+        :header-align="item.headerAlign">
+        <template #header>
+          <template v-if="!item.slotHeader">
+            <span v-if="!item.filterType">{{ item.label }}</span>
+            <span v-else>
+              {{ item.label }}
+              <!-- 多选 -->
+              <el-popover v-if="item.filterType === 'multiple'" placement="bottom" :ref="`${item.prop}`"
+                v-model="item.visible" trigger="click" width="160">
+                <div style="max-height:300px;overflow: auto;">
+                  <el-checkbox-group v-model="item.value">
+                    <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
+                      <el-checkbox :label="x.value">{{ x.label }}</el-checkbox>
+                    </div>
+                  </el-checkbox-group>
+                </div>
+                <div style="text-align: center;margin-top:10px">
+                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
+                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
+                </div>
+                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
+                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
+              </el-popover>
+              <!-- 日期选择 -->
+              <el-popover v-else-if="item.filterType === 'daterange'" placement="bottom" :ref="`${item.prop}`"
+                v-model="item.visible" trigger="click" width="360">
+                <el-date-picker v-model="item.value" type="daterange" size="small" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+                <div style="text-align: center;margin-top:10px">
+                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
+                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
+                </div>
+                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
+                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
+              </el-popover>
+              <!-- 月份选择 -->
+              <el-popover v-else-if="item.filterType === 'monthrange'" placement="bottom" :ref="`${item.prop}`"
+                v-model="item.visible" trigger="click" width="300">
+                <el-date-picker v-model="item.value" type="monthrange" size="small" range-separator="至"
+                  start-placeholder="开始月份" end-placeholder="结束月份">
+                </el-date-picker>
+                <div style="text-align: center;margin-top:10px">
+                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
+                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
+                </div>
+                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
+                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
+              </el-popover>
+              <!-- 输入框 -->
+              <el-popover v-else-if="item.filterType === 'text'" placement="bottom" :ref="`${item.prop}`"
+                v-model="item.visible" trigger="click" width="160">
+                <el-input v-model="item.value" clearable size="small"></el-input>
+                <div style="text-align: center;margin-top:10px">
+                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
+                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
+                </div>
+                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{ 'selected-color': item.value }"
+                  @click.stop=""></i>
+              </el-popover>
+              <!-- 单选 -->
+              <el-popover v-else-if="item.filterType === 'single'" placement="bottom" :ref="`${item.prop}`"
+                v-model="item.visible" trigger="click" width="160">
+                <div style="max-height:300px;overflow: auto;">
+                  <el-radio-group v-model="item.value">
+                    <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
+                      <el-radio :label="x.value">{{ x.label }}</el-radio>
+                    </div>
+                  </el-radio-group>
+                </div>
+                <div style="text-align: center;margin-top:10px">
+                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
+                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
+                </div>
+                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
+                  :class="{ 'selected-color': item.value || item.value === 0 }" @click.stop=""></i>
+              </el-popover>
             </span>
-            <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-if="showPageSum" :command="0">分页合计</el-dropdown-item>
-                <el-dropdown-item v-if="showChoiseSum" :command="1">选中合计</el-dropdown-item>
-                <el-dropdown-item :command="2">全部合计</el-dropdown-item>
-            </el-dropdown-menu>
-        </el-dropdown>
+          </template>
+          <!-- 自定义表头 -->
+          <slot v-else :name="item.slotHeader"></slot>
+        </template>
+        <template slot-scope="scope">
+          <span v-if="!item.slotCell" :style="item.style" @click="handleColumnClick(scope.row, item)">
+            {{ transContent(scope.row, item.prop) || '-' }}
+          </span>
+          <!--自定义表格内容-->
+          <slot v-else :name="item.slotCell" :row="scope.row" :index="scope.$index"></slot>
+        </template>
+      </el-table-column>
+      <!-- 自定义表尾列 -->
+      <slot name="end"></slot>
+      <div slot="empty" class="empty" style="margin-top:22px;">
+        <noData></noData>
+      </div>
+    </el-table>
+    <div class="sum" v-if="customSum">
+      <slot name="customSum"></slot>
     </div>
+    <el-dropdown class="sum" @command="changeSumType" v-if="showSummary && data.length && !customSum">
+      <span class="el-dropdown-link">
+        {{ totalText[sumType] }}<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-if="showPageSum" :command="0">分页合计</el-dropdown-item>
+        <el-dropdown-item v-if="showChoiseSum" :command="1">选中合计</el-dropdown-item>
+        <el-dropdown-item :command="2">全部合计</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
 </template>
 <script>
 import noData from './noData';
 import dragSet from '../../drag-set';
 import BigDataTable from './BigDataTable.js'
 export default {
-    name: 'SyTable',
-    props: {
-        // 列表数据
-        data: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        // 列表列
-        columns: {
-            type: Array,
-            default: () => []
-        },
-        // 列表高度
-        height: {},
-        // 列表内容转换的方法
-        transContent: {
-            type: Function,
-            required: true,
-            default: () => {}
-        },
-        // 是否显示合计功能
-        showSummary: {
-            type: Boolean,
-            default: () => false
-        },
-        // 是否显示选中合计： 默认不显示
-        showChoiseSum: {
-            type: Boolean,
-            default: () => false
-        },
-        // 是否显示当前页合计： 默认显示
-        showPageSum: {
-            type: Boolean,
-            default: () => true
-        },
-        // 自定义合计样式
-        customSum: {
-            type: Boolean,
-            default: () => false
-        },
-        // 合计的处理方法
-        getSummaries: {
-            type: Function,
-            default: () => {}
-        },
-        // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
-        rowKey: {
-            type: String,
-            default: () => ''
-        },
-        // 展示树形数据时，树节点的缩进
-        indent: {
-            type: Number,
-            default: () => 16
-        },
-        // 是否懒加载子节点数据
-        lazy: {
-            type: Boolean,
-            default: () => false
-        },
-        // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
-        load: {
-            type: Function,
-            default: () => {}
-        },
-        // 渲染嵌套数据的配置选项
-        treeProps: {
-            type: Object,
-            default: () => { return { hasChildren: 'hasChildren', children: 'children' }; }
-        },
-        // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
-        defaultExpandAll: {
-            type: Boolean,
-            default: () => false
-        },
-        // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
-        expandRowKeys: {
-            type: Array,
-            default: () => undefined
-        },
-        // 是否显示表格右上角设置功能，默认true
-        showDragSet: {
-            type: Boolean,
-            default: () => true
-        },
-        // 合计信息
-        sumInfo: {
-            type: Object,
-            default: () => {}
-        },
-        // 功能模块key唯一
-        nameKey: {
-            type: String,
-            default: () => ''
-        },
-        // 合计功能保留小数位
-        decimalNum: {
-            type: Number,
-            default: () => 2
-        },
-        virtual: Boolean
-    },
-    data () {
+  name: 'SyTable',
+  props: {
+    // 列表数据
+    data: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 列表列
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 列表高度
+    height: {},
+    // 列表内容转换的方法
+    transContent: {
+      type: Function,
+      required: true,
+      default: () => { }
+    },
+    // 是否显示合计功能
+    showSummary: {
+      type: Boolean,
+      default: () => false
+    },
+    // 是否显示选中合计： 默认不显示
+    showChoiseSum: {
+      type: Boolean,
+      default: () => false
+    },
+    // 是否显示当前页合计： 默认显示
+    showPageSum: {
+      type: Boolean,
+      default: () => true
+    },
+    // 自定义合计样式
+    customSum: {
+      type: Boolean,
+      default: () => false
+    },
+    // 合计的处理方法
+    getSummaries: {
+      type: Function,
+      default: () => { }
+    },
+    // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
+    rowKey: {
+      type: String,
+      default: () => ''
+    },
+    // 展示树形数据时，树节点的缩进
+    indent: {
+      type: Number,
+      default: () => 16
+    },
+    // 是否懒加载子节点数据
+    lazy: {
+      type: Boolean,
+      default: () => false
+    },
+    // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
+    load: {
+      type: Function,
+      default: () => { }
+    },
+    // 渲染嵌套数据的配置选项
+    treeProps: {
+      type: Object,
+      default: () => { return { hasChildren: 'hasChildren', children: 'children' }; }
+    },
+    // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
+    defaultExpandAll: {
+      type: Boolean,
+      default: () => false
+    },
+    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+    expandRowKeys: {
+      type: Array,
+      default: () => undefined
+    },
+    // 是否显示表格右上角设置功能，默认true
+    showDragSet: {
+      type: Boolean,
+      default: () => true
+    },
+    // 合计信息
+    sumInfo: {
+      type: Object,
+      default: () => { }
+    },
+    // 功能模块key唯一
+    nameKey: {
+      type: String,
+      default: () => ''
+    },
+    // 合计功能保留小数位
+    decimalNum: {
+      type: Number,
+      default: () => 2
+    },
+    virtual: Boolean
+  },
+  data() {
+    return {
+      totalText: {
+        0: '分页合计',
+        1: '选中合计',
+        2: '全部合计'
+      },
+      columnList: [], // 表格列数据
+      sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
+      selection: [], // 当前选中表格数据
+      fillData: [],
+    };
+  },
+  components: {
+    noData,
+    dragSet
+  },
+  computed: {
+    // 表格列数据
+    columnData() {
+      return this.columnList.filter((item) => item.isShow);
+    },
+    table() {
+      return this.$refs.cusTable;
+    },
+    attrs() {
+      if (this.virtual) {
+        return {
+          data: this.fillData,
+          'row-style': this.fillrow
+        }
+      } else {
+        return {
+          data: this.data,
+        }
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler(data) {
+        if (this.virtual) {
+          this.reload()
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getColumnsData(); // 获取表格列数据
+  },
+  mounted() {
+    for (const item of this.columnList) {
+      this.$set(item, 'visible', false);
+      if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
+        this.$set(item, 'value', []);
+      } else if (['text', 'single'].indexOf(item.filterType) > -1) {
+        this.$set(item, 'value', '');
+      }
+    }
+  },
+  updated() {
+    this.doLayout();
+  },
+  methods: {
+    fillrow({
+      row,
+      rowIndex
+    }) {
+      if (rowIndex === 0) {
         return {
-            totalText: {
-                0: '分页合计',
-                1: '选中合计',
-                2: '全部合计'
-            },
-            columnList: [], // 表格列数据
-            sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
-            selection: [], // 当前选中表格数据
-            fillData: [],
-        };
-    },
-    components: {
-        noData,
-        dragSet
-    },
-    computed: {
-        // 表格列数据
-        columnData () {
-            return this.columnList.filter((item) => item.isShow);
-        },
-        table () {
-            return this.$refs.cusTable;
-        },
-        attrs() {
-            if (this.virtual) {
-                return {
-                    data: this.fillData,
-                    'row-style': this.fillrow
-                }
-            } else {
-                return {
-                    data: this.data,
-                }
-            }
+          height: this.topSpan + 'px'
         }
+      }
+      if (rowIndex === this.fillData.length - 1) {
+        return {
+          height: this.bottomSpan + 'px'
+        }
+      }
     },
-    watch: {
-        data: {
-            handler(data) {
-                if (this.virtual) {
-                    this.reload()
-                }
-            },
-            immediate: true
+    reload() {
+      this.$nextTick(() => {
+        console.log(this.$refs.cusTable, 353)
+        if (!this.$refs.cusTable) return
+        const ref = this.$refs.cusTable.$refs.bodyWrapper
+        if (!this.tableControl) {
+          this.initBigDataTable(ref)
+        } else {
+          this.tableControl.refresh()
         }
+      })
+    },
+    // 初始化大数据表
+    initBigDataTable(ref) {
+      const options = {
+        scrollerRef: ref,
+        data: 'data', // length:50000
+        fill_data: 'fillData',
+        top_span: 'topSpan',
+        bottom_span: 'bottomSpan',
+        filldata_length: 33,
+        table_item_height: 32
+      }
+      this.tableControl = new BigDataTable(this, options)
+      console.log(this.fillData, 375)
     },
-    created() {
-        this.getColumnsData(); // 获取表格列数据
+    // 获取表格列数据
+    getColumnsData() {
+      if (this.nameKey) {
+        const list = localStorage.getItem(`vsyswin_${this.nameKey}`);
+        if (list) {
+          this.columnList = JSON.parse(list);
+        } else {
+          this.columnList = this.columns;
+        }
+      } else {
+        this.columnList = this.columns;
+      }
     },
-    mounted () {
+    // 列表头宽度拉伸
+    handleHeaderDragend(newWidth, oldWidth, column, event) {
+      if (this.nameKey) {
         for (const item of this.columnList) {
-            this.$set(item, 'visible', false);
-            if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
-                this.$set(item, 'value', []);
-            } else if (['text', 'single'].indexOf(item.filterType) > -1) {
-                this.$set(item, 'value', '');
-            }
+          if (item.label === column.label && item.prop === column.property) {
+            this.$set(item, 'width', newWidth);
+          }
         }
+        localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
+      } else {
+        this.$emit('header-dragend', newWidth, oldWidth, column, event);
+      }
     },
-    updated () {
-        this.doLayout();
+    // 点击表格内容
+    handleColumnClick(row, column) {
+      this.$emit('cell-click', row, column);
     },
-    methods: {
-        fillrow({
-            row,
-            rowIndex
-        }) {
-            if (rowIndex === 0) {
-                return {
-                    height: this.topSpan + 'px'
-                }
-            }
-            if (rowIndex === this.fillData.length - 1) {
-                return {
-                    height: this.bottomSpan + 'px'
-                }
-            }
-        },
-        reload() {
-            this.$nextTick(() => {
-                console.log(this.$refs.cusTable, 353)
-                if (!this.$refs.cusTable) return
-                const ref = this.$refs.cusTable.$refs.bodyWrapper
-                if (!this.tableControl) {
-                    this.initBigDataTable(ref)
-                } else {
-                    this.tableControl.refresh()
-                }
-            })
-        },
-        // 初始化大数据表
-        initBigDataTable(ref) {
-            const options = {
-            scrollerRef: ref,
-            data: 'data', // length:50000
-            fill_data: 'fillData',
-            top_span: 'topSpan',
-            bottom_span: 'bottomSpan',
-            filldata_length: 33,
-            table_item_height: 32
-            }
-            this.tableControl = new BigDataTable(this, options)
-            console.log(this.fillData, 375)
-        },
-        // 获取表格列数据
-        getColumnsData () {
-            if (this.nameKey) {
-                const list = localStorage.getItem(`vsyswin_${this.nameKey}`);
-                if (list) {
-                    this.columnList = JSON.parse(list);
-                } else {
-                    this.columnList = this.columns;
-                }
-            } else {
-                this.columnList = this.columns;
-            }
-        },
-        // 列表头宽度拉伸
-        handleHeaderDragend (newWidth, oldWidth, column, event) {
-            if (this.nameKey) {
-                for (const item of this.columnList) {
-                    if (item.label === column.label && item.prop === column.property) {
-                        this.$set(item, 'width', newWidth);
-                    }
-                }
-                localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
-            } else {
-                this.$emit('header-dragend', newWidth, oldWidth, column, event);
-            }
-        },
-        // 点击表格内容
-        handleColumnClick (row, column) {
-            this.$emit('cell-click', row, column);
-        },
-        // 列表排序 value, row, column
-        handleSortChange (params) {
-            this.$emit('sort-change', params);
-        },
-        // 表格勾选事件
-        handleSelectionChange (selection) {
-            this.selection = selection;
-            this.$emit('selection-change', selection);
-        },
-        // 当用户手动勾选全选 Checkbox 时触发的事件
-        handleSelectAll (selection) {
-          this.$emit('select-all', selection);
-        },
-        // 当用户手动勾选数据行的 Checkbox 时触发的事件
-        handleSelect (selection, row) {
-          this.$emit('select', selection, row);
-        },
-        // 表格行展开事件
-        handleExpandChange (row, value) {
-            this.$emit('expand-change', row, value);
-        },
-        // 合计类型转换
-        changeSumType (type) {
-            this.sumType = type;
-        },
-        doLayout () {
-            this.$refs.cusTable.doLayout();
-        },
-        // 列表控制列表点击确定
-        dragChange (list) {
-            if (this.nameKey) {
-                this.columnList = list;
-                localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
-            } else {
-                this.$emit('drag-change', list);
-            }
-        },
-        // 表头过滤筛选
-        handleSearch (column) {
-            this.$emit('filter-change', column);
-        },
-        // 表头过滤条件重置
-        reset (column) {
-            if (['multiple', 'daterange', 'monthrange'].indexOf(column.filterType) > -1) {
-                column.value = [];
-            } else if (['text', 'single'].indexOf(column.filterType) > -1) {
-                column.value = '';
-            }
-            this.$emit('filter-change', column);
-        },
-        // 清空用户的选择，用于多选表格
-        clearSelection () {
-            this.$refs.cusTable.clearSelection();
-        },
-        // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
-        toggleRowSelection (row, selected) {
-            this.$refs.cusTable.toggleRowSelection(row, selected);
-        },
-        // 用于多选表格，切换所有行的选中状态
-        toggleAllSelection () {
-            this.$refs.cusTable.toggleAllSelection();
-        },
-        // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
-        toggleRowExpansion (row, expanded) {
-            this.$refs.cusTable.toggleRowExpansion(row, expanded);
-        },
-        // 用于清空排序条件，数据会恢复成未排序的状态
-        clearSort () {
-            this.$refs.cusTable.clearSort();
-        },
-        // 自定义合计方法
-        getSummariesNum ({ columns, data }) {
-            this.$nextTick(() => {
-                this.doLayout();
-            });
-            const sums = [];
-            columns.forEach((column, index) => {
-                let values = data.map(item => Number(item[column.property]));
-                if (this.sumType === 1) { // 当为选中合计时
-                    values = this.selection.map(item => Number(item[column.property]));
-                }
-                // 判断当前列是否需要进行合计
-                if (this.sumInfo[column.property] || this.sumInfo[column.property] === 0) {
-                    if (this.sumType === 2) { // 当为全部合计时；使用传入的合计值
-                        sums[index] = this.sumInfo[column.property];
-                    } else {
-                        sums[index] = values.reduce((prev, curr) => {
-                            const value = Number(curr);
-                            if (!isNaN(value)) {
-                                return prev + curr;
-                            } else {
-                                return prev;
-                            }
-                        }, 0);
-                    }
-                    if (this.decimalNum < 0) {
-                      // sums[index] = sums[index];
-                    } else {
-                      sums[index] = (+sums[index]).toFixed(this.decimalNum);
-                    }
-                } else {
-                    sums[index] = '';
-                }
-            });
-            return sums;
-        }
+    // 列表排序 value, row, column
+    handleSortChange(params) {
+      this.$emit('sort-change', params);
+    },
+    // 表格勾选事件
+    handleSelectionChange(selection) {
+      this.selection = selection;
+      this.$emit('selection-change', selection);
+    },
+    // 当用户手动勾选全选 Checkbox 时触发的事件
+    handleSelectAll(selection) {
+      this.$emit('select-all', selection);
+    },
+    // 当用户手动勾选数据行的 Checkbox 时触发的事件
+    handleSelect(selection, row) {
+      this.$emit('select', selection, row);
+    },
+    // 表格行展开事件
+    handleExpandChange(row, value) {
+      this.$emit('expand-change', row, value);
     },
+    // 合计类型转换
+    changeSumType(type) {
+      this.sumType = type;
+    },
+    doLayout() {
+      this.$refs.cusTable.doLayout();
+    },
+    // 列表控制列表点击确定
+    dragChange(list) {
+      if (this.nameKey) {
+        this.columnList = list;
+        localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
+      } else {
+        this.$emit('drag-change', list);
+      }
+    },
+    // 表头过滤筛选
+    handleSearch(column) {
+      this.$emit('filter-change', column);
+    },
+    // 表头过滤条件重置
+    reset(column) {
+      if (['multiple', 'daterange', 'monthrange'].indexOf(column.filterType) > -1) {
+        column.value = [];
+      } else if (['text', 'single'].indexOf(column.filterType) > -1) {
+        column.value = '';
+      }
+      this.$emit('filter-change', column);
+    },
+    // 清空用户的选择，用于多选表格
+    clearSelection() {
+      this.$refs.cusTable.clearSelection();
+    },
+    // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+    toggleRowSelection(row, selected) {
+      this.$refs.cusTable.toggleRowSelection(row, selected);
+    },
+    // 用于多选表格，切换所有行的选中状态
+    toggleAllSelection() {
+      this.$refs.cusTable.toggleAllSelection();
+    },
+    // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
+    toggleRowExpansion(row, expanded) {
+      this.$refs.cusTable.toggleRowExpansion(row, expanded);
+    },
+    // 用于清空排序条件，数据会恢复成未排序的状态
+    clearSort() {
+      this.$refs.cusTable.clearSort();
+    },
+    // 自定义合计方法
+    getSummariesNum({ columns, data }) {
+      this.$nextTick(() => {
+        this.doLayout();
+      });
+      const sums = [];
+      columns.forEach((column, index) => {
+        let values = data.map(item => Number(item[column.property]));
+        if (this.sumType === 1) { // 当为选中合计时
+          values = this.selection.map(item => Number(item[column.property]));
+        }
+        // 判断当前列是否需要进行合计
+        if (this.sumInfo[column.property] || this.sumInfo[column.property] === 0) {
+          if (this.sumType === 2) { // 当为全部合计时；使用传入的合计值
+            sums[index] = this.sumInfo[column.property];
+          } else {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          }
+          if (this.decimalNum < 0) {
+            // sums[index] = sums[index];
+          } else {
+            sums[index] = (+sums[index]).toFixed(this.decimalNum);
+          }
+        } else {
+          sums[index] = '';
+        }
+      });
+      return sums;
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>
-    .sum {
-        position: absolute;
-        margin-left: 10px;
-        // width: 82px;
-        font-size: 12px;
-        height: 36px;
-        line-height: 36px;
-        text-align: center;
-        background: #F5F7FA;
-        left: 1px;
-        bottom: 1px;
-        z-index: 4;
-    }
-    .filterItem {
-        width: 100%;
-        height: 30px;
-        line-height: 30px;
-        background: #fff;
-        padding: 0 10px;
-        box-sizing: border-box;
-    }
-    .filter-icon {
-        margin-top: 1px;
-        float: right;
-        font-size: 9px !important;
-        cursor: pointer;
-        color: rgba(0, 0, 0, .5);
-    }
-    .selected-color {
-        color: #027AFF;
-    }
-    .el-button--primary {
-        background-color: #027AFF;
-        border-color: #027AFF;
-    }
-    // .el-button:hover {
-    //     background: #027aff !important;
-    //     color: #fff !important;
-    //     border: 1px solid #027aff !important;
-    // }
+.sum {
+  position: absolute;
+  margin-left: 10px;
+  // width: 82px;
+  font-size: 12px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background: #F5F7FA;
+  left: 1px;
+  bottom: 1px;
+  z-index: 4;
+}
+
+.filterItem {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  background: #fff;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.filter-icon {
+  margin-top: 1px;
+  float: right;
+  font-size: 9px !important;
+  cursor: pointer;
+  color: rgba(0, 0, 0, .5);
+}
+
+.selected-color {
+  color: #027AFF;
+}
+
+.el-button--primary {
+  background-color: #027AFF;
+  border-color: #027AFF;
+}
+
+// .el-button:hover {
+//     background: #027aff !important;
+//     color: #fff !important;
+//     border: 1px solid #027aff !important;
+// }
 </style>
 <style lang="scss">
-.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: #027AFF;
-    border-color: #027AFF;
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #027AFF;
+  border-color: #027AFF;
 }
+
 .el-radio__input.is-checked .el-radio__inner {
-    border-color: #027AFF;
-    background: #027AFF;
+  border-color: #027AFF;
+  background: #027AFF;
 }
+
 // .el-input__inner {
 //     height: 32px !important;
 //     line-height: 32px !important;
@@ -593,139 +544,171 @@ export default {
 // }
 
 .el-input__inner:hover {
-    border-color: #D0D3D6!important;
+  border-color: #D0D3D6 !important;
 }
 
-.el-input.is-active .el-input__inner, .el-input__inner:focus {
-    border-color: #4A8DF0!important;
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border-color: #4A8DF0 !important;
 }
+
 .el-button--primary.is-plain {
-    height: 20px!important;
-    line-height: 18px!important;
-    padding: 0 9px!important;
-    background: none!important;
-    border: 1px solid #4A8DF0!important;
-    color: #4A8DF0!important;
-    font-size: 12px;
+  height: 20px !important;
+  line-height: 18px !important;
+  padding: 0 9px !important;
+  background: none !important;
+  border: 1px solid #4A8DF0 !important;
+  color: #4A8DF0 !important;
+  font-size: 12px;
 }
 
-.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
-    background: #4184E7!important;
-    color: #fff!important;
+.el-button--primary.is-plain:focus,
+.el-button--primary.is-plain:hover {
+  background: #4184E7 !important;
+  color: #fff !important;
 }
 
 .el-button--primary.is-plain:active {
-    background: #3070CF!important;
-    color: #fff!important;
+  background: #3070CF !important;
+  color: #fff !important;
 }
 
 .syswin-table {
-    table {
-        border-collapse: collapse;
-        border-spacing: 0;
-    }
-    .el-table__empty-block {
-        position: absolute!important;
-        height: calc(100% - 60px)!important;
-    }
-
-    // .el-table::before {
-    //     background: none!important;
-    // }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
 
-    .el-table table {
-        width: 100% !important;
-    }
-
-    .el-table__empty-block {
+  .el-table__empty-block {
+    position: absolute !important;
+    height: calc(100% - 60px) !important;
+  }
+  .el-table {
+    // border-radius: 0 0 8px 8px  !important;
+    color: #282828;
+  }
+  .el-table table {
     width: 100% !important;
-    }
+  }
 
-    .el-table th {
-    background: #F2F5F9 !important;
-    padding: 3px 0!important;
-    }
-
-    .el-table td, .el-table th.is-leaf {
-    border-right: 1px solid #D8D8D8;
-    }
+  .el-table__empty-block {
+    width: 100% !important;
+  }
+  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+    background: #fff;
+  }
+  .el-table th {
+    font-weight: bold;
+    color: #282828;
+    background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 100%) !important;
+    padding: 9px 0 !important;
+  }
 
-    .el-table th:first-child {
+  .el-table td,
+  .el-table th.is-leaf {
+    // border-right: 1px solid #D8D8D8;
+    border-right: none;
+  }
+  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+    border-bottom:1px solid #f1f1f1;
+  }
+  .el-table--border, .el-table--group {
+    border: none !important;
+  }
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    width: 0;
+  }
+  .el-table th:first-child {
     padding: 0 !important;
     box-sizing: border-box;
-    }
+  }
 
-    .el-table th .cell {
-        height: 34px !important;
-        line-height: 34px !important;
-        padding: 0 10px !important;
-        box-sizing: border-box;
-        min-width: 50px;
-        overflow: hidden;
-        text-overflow: clip;
-        white-space: nowrap;
-    }
+  .el-table th .cell {
+    height: 34px !important;
+    line-height: 34px !important;
+    padding: 0 10px !important;
+    box-sizing: border-box;
+    min-width: 50px;
+    overflow: hidden;
+    text-overflow: clip;
+    white-space: nowrap;
+  }
 
-    .el-table__footer .cell {
-        padding: 0 10px !important;
-        box-sizing: border-box;
-        min-width: 50px;
-        overflow: hidden;
-        text-overflow: clip;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
+  .el-table__footer .cell {
+    padding: 0 10px !important;
+    box-sizing: border-box;
+    min-width: 50px;
+    overflow: hidden;
+    text-overflow: clip;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-    .el-table th:first-child .cell {
-        padding: 0 10px !important;
-        box-sizing: border-box;
-    }
+  .el-table th:first-child .cell {
+    padding: 0 20px !important;
+    box-sizing: border-box;
+  }
 
-    .el-table td {
-        padding: 7px 0!important;
-    }
+  .el-table td {
+    padding: 10px 0 !important;
+  }
 
-    .el-table tbody td {
-        border-right: none;
-    }
+  .el-table tbody td {
+    border-right: none;
+  }
+  .el-table tbody td:last-child {
+    border-right: none !important;
+  }
+  .el-table tbody .hover-row>td {
+    background: #DCE8F9 !important;
+  }
 
-    .el-table tbody .hover-row>td {
-        background: #DCE8F9 !important;
-    }
+  .el-table td:first-child {
+    padding: 0 !important;
+    box-sizing: border-box;
+  }
 
-    .el-table td:first-child {
-        padding: 0 !important;
-        box-sizing: border-box;
-    }
+  .el-table td:first-child .cell {
+    padding: 14px 20px !important;
+    box-sizing: border-box;
+  }
 
-    .el-table td:first-child .cell {
-        padding: 0 10px !important;
-        box-sizing: border-box;
-    }
+  .el-table th>.cell {
+    font-size: 14px !important;
+    font-weight: bold !important;
+    color: #282828 !important;
+  }
 
-    .el-table th>.cell {
-        font-size: 14px !important;
-        font-weight: bold !important;
-        color: rgba(0, 0, 0, 0.65) !important;
-    }
-    .el-table .sort-caret.ascending {
-        border-bottom-color: rgba(0, 0, 0, .5) !important;
-    }
+  .el-table .sort-caret.ascending {
+    border-bottom-color: rgba(0, 0, 0, .5) !important;
+  }
 
-    .el-table .sort-caret.descending {
-        border-top-color: rgba(0, 0, 0, .5) !important;
-    }
+  .el-table .sort-caret.descending {
+    border-top-color: rgba(0, 0, 0, .5) !important;
+  }
 
-    .el-table .ascending .sort-caret.ascending {
-        border-bottom-color: #027AFF !important;
-    }
+  .el-table .ascending .sort-caret.ascending {
+    border-bottom-color: #027AFF !important;
+  }
 
-    .el-table .descending .sort-caret.descending {
-        border-top-color: #027AFF !important;
-    }
+  .el-table .descending .sort-caret.descending {
+    border-top-color: #027AFF !important;
+  }
 
-    .el-table__fixed-right::before, .el-table__fixed::before {
-        height: 0;
-    }
+  .el-table__fixed-right::before,
+  .el-table__fixed::before {
+    height: 0;
+  }
+  .el-input__inner{
+    border: 1px solid #f1f1f1;
+    color: #282828;
+  }
+  .el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell {
+    // background: #f1f1f1;
+    color: #282828;
+  }
+  .el-table__footer-wrapper td.el-table__cell {
+    border-top: none;
+  }
 }
 </style>