|
|
@@ -1,109 +1,131 @@
|
|
|
<!--
|
|
|
* @Author: zzy6937@qq.com
|
|
|
* @Date: 2019-07-01 09:14:32
|
|
|
- * @LastEditors: wf
|
|
|
- * @LastEditTime: 2021-09-22 21:24:17
|
|
|
+ * @LastEditors: D4THYL3
|
|
|
+ * @LastEditTime: 2022-08-08 14:20:15
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="zz-table">
|
|
|
- <!-- :height='isScroll ? boxHeight : null' -->
|
|
|
- <el-table
|
|
|
- :border="settings.tableBorder"
|
|
|
- :height="height"
|
|
|
- style="width: 100%"
|
|
|
- ref="table"
|
|
|
- v-loading="loading"
|
|
|
- :data="data"
|
|
|
- :summary-method="getSummaries"
|
|
|
- :show-summary="!!(settings.summaryCol && settings.summaryCol.length)"
|
|
|
- tooltip-effect="light"
|
|
|
- size="small"
|
|
|
- :key="updateFlag"
|
|
|
- @selection-change="selectionChange"
|
|
|
- row-key="id"
|
|
|
- :expand-row-keys="expands"
|
|
|
- @expand-change="toggleRow"
|
|
|
- @sort-change="sortChange"
|
|
|
- :default-sort="settings.defaultSort"
|
|
|
- :empty-text="emptyText"
|
|
|
- :show-header="settings.showHeader"
|
|
|
- :row-class-name="setRowClassName"
|
|
|
- lazy
|
|
|
- :load="load"
|
|
|
- :tree-props="treeProps"
|
|
|
- class="customer-table"
|
|
|
+ <div class="zz-table">
|
|
|
+ <!-- :height='isScroll ? boxHeight : null' -->
|
|
|
+ <el-table
|
|
|
+ :border="settings.tableBorder"
|
|
|
+ :height="height"
|
|
|
+ style="width: 100%"
|
|
|
+ ref="table"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ :show-summary="!!(settings.summaryCol && settings.summaryCol.length)"
|
|
|
+ tooltip-effect="light"
|
|
|
+ size="small"
|
|
|
+ :key="updateFlag"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ row-key="id"
|
|
|
+ :expand-row-keys="expands"
|
|
|
+ @expand-change="toggleRow"
|
|
|
+ @sort-change="sortChange"
|
|
|
+ :default-sort="settings.defaultSort"
|
|
|
+ :empty-text="emptyText"
|
|
|
+ :show-header="settings.showHeader"
|
|
|
+ :row-class-name="setRowClassName"
|
|
|
+ lazy
|
|
|
+ :load="load"
|
|
|
+ :tree-props="treeProps"
|
|
|
+ class="customer-table"
|
|
|
+ >
|
|
|
+ <!-- 显示多选框 -->
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ v-if="settings.showCheckbox"
|
|
|
+ :selectable="selectable"
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- 显示单选框 -->
|
|
|
+ <el-table-column
|
|
|
+ width="50"
|
|
|
+ align="left"
|
|
|
+ v-if="settings.showRadio"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-radio-group v-model="radioSelect">
|
|
|
+ <el-radio :label="scope.$index"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 显示序号 -->
|
|
|
+ <el-table-column
|
|
|
+ label="No."
|
|
|
+ type="index"
|
|
|
+ :width="70"
|
|
|
+ align="left"
|
|
|
+ v-if="settings.showIndex"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="NO."
|
|
|
+ type="index"
|
|
|
+ :width="settings.showNumberWidth"
|
|
|
+ align="left"
|
|
|
+ v-if="settings.showNumber"
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- 显示具体行 -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in cols"
|
|
|
+ :fixed="item.fixed"
|
|
|
+ :width="item.width"
|
|
|
+ :min-width="item.minWidth"
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :key="index"
|
|
|
+ :type="item.type"
|
|
|
+ align="left"
|
|
|
+ :sortable="item.sort || false"
|
|
|
+ filter-placement="bottom"
|
|
|
+ :show-overflow-tooltip="!isIE"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ slot="header"
|
|
|
+ slot-scope="scope"
|
|
|
>
|
|
|
- <!-- 显示多选框 -->
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- width="60"
|
|
|
- align="center"
|
|
|
- v-if="settings.showCheckbox"
|
|
|
- :selectable="selectable"
|
|
|
- ></el-table-column>
|
|
|
- <!-- 显示单选框 -->
|
|
|
- <el-table-column width="50" align="left" v-if="settings.showRadio">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-radio-group v-model="radioSelect">
|
|
|
- <el-radio :label="scope.$index"></el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <!-- 显示序号 -->
|
|
|
- <el-table-column label="No." type="index" :width="70" align="left" v-if="settings.showIndex"></el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="NO."
|
|
|
- type="index"
|
|
|
- :width="settings.showNumberWidth"
|
|
|
- align="left"
|
|
|
- v-if="settings.showNumber"
|
|
|
- ></el-table-column>
|
|
|
- <!-- 显示具体行 -->
|
|
|
- <el-table-column
|
|
|
- v-for="(item, index) in cols"
|
|
|
- :fixed="item.fixed"
|
|
|
- :width="item.width"
|
|
|
- :min-width="item.minWidth"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :key="index"
|
|
|
- :type="item.type"
|
|
|
- align="left"
|
|
|
- :sortable="item.sort || false"
|
|
|
- filter-placement="bottom"
|
|
|
- :show-overflow-tooltip="!isIE"
|
|
|
- >
|
|
|
- <template slot="header" slot-scope="scope">
|
|
|
- <slot v-if="item.headerSlot" :name="item.headerSlot" :data="scope"></slot>
|
|
|
- <span v-else>{{ item.label }}</span>
|
|
|
- </template>
|
|
|
- <template slot-scope="scope">
|
|
|
- <!-- 插槽 -->
|
|
|
- <slotItem v-if="item.slot" :row="scope.row" :index="scope.$index" :slots="$scopedSlots[item.slot]"></slotItem>
|
|
|
- <!-- 过滤方法 -->
|
|
|
- <el-tooltip
|
|
|
- v-else-if="item.format && isIE"
|
|
|
- class="item"
|
|
|
- effect="light"
|
|
|
- placement="bottom"
|
|
|
- :disabled="item.format(scope.row[item.prop]).length < 2"
|
|
|
- :content="item.format(scope.row[item.prop])"
|
|
|
- >
|
|
|
- <p
|
|
|
- @click="item.click ? item.click() : null"
|
|
|
- v-html="
|
|
|
+ <slot
|
|
|
+ v-if="item.headerSlot"
|
|
|
+ :name="item.headerSlot"
|
|
|
+ :data="scope"
|
|
|
+ ></slot>
|
|
|
+ <span v-else>{{ item.label }}</span>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 插槽 -->
|
|
|
+ <slotItem
|
|
|
+ v-if="item.slot"
|
|
|
+ :row="scope.row"
|
|
|
+ :index="scope.$index"
|
|
|
+ :slots="$scopedSlots[item.slot]"
|
|
|
+ ></slotItem>
|
|
|
+ <!-- 过滤方法 -->
|
|
|
+ <el-tooltip
|
|
|
+ v-else-if="item.format && isIE"
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom"
|
|
|
+ :disabled="item.format(scope.row[item.prop]).length < 2"
|
|
|
+ :content="item.format(scope.row[item.prop])"
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ @click="item.click ? item.click() : null"
|
|
|
+ v-html="
|
|
|
item.format(scope.row[item.prop], scope.row) ||
|
|
|
(item.format(scope.row[item.prop], scope.row) === 0 ? 0 : item.empty ? '' : '-')
|
|
|
"
|
|
|
- ></p>
|
|
|
- </el-tooltip>
|
|
|
- <p
|
|
|
- v-else-if="item.format && !isIE"
|
|
|
- @click="item.click ? item.click() : null"
|
|
|
- v-html="item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')"
|
|
|
- ></p>
|
|
|
- <!-- <p
|
|
|
+ ></p>
|
|
|
+ </el-tooltip>
|
|
|
+ <p
|
|
|
+ v-else-if="item.format && !isIE"
|
|
|
+ @click="item.click ? item.click() : null"
|
|
|
+ v-html="item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')"
|
|
|
+ ></p>
|
|
|
+ <!-- <p
|
|
|
v-else-if="item.format && isIE"
|
|
|
class="item" effect="light" placement="top-start"
|
|
|
@click="item.click ? item.click() : null"
|
|
|
@@ -113,328 +135,331 @@
|
|
|
(item.format(scope.row[item.prop], scope.row) === 0 ? 0 : item.empty ? '' : '-')
|
|
|
}}
|
|
|
</p> -->
|
|
|
- <!-- <p v-else-if="item.format" @click='item.click?item.click():null'>{{item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')}}</p> -->
|
|
|
- <!-- 默认显示 -->
|
|
|
- <el-tooltip
|
|
|
- v-else-if="!item.slot && !item.format && isIE"
|
|
|
- class="item"
|
|
|
- effect="light"
|
|
|
- placement="bottom"
|
|
|
- :disabled="scope.row[item.prop] && scope.row[item.prop].length < 2"
|
|
|
- :content="scope.row[item.prop]"
|
|
|
- >
|
|
|
- <p
|
|
|
- @click="item.click ? item.click() : null"
|
|
|
- v-html="scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')"
|
|
|
- ></p>
|
|
|
- </el-tooltip>
|
|
|
- <p
|
|
|
- v-else
|
|
|
- @click="item.click ? item.click() : null"
|
|
|
- v-html="scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')"
|
|
|
- ></p>
|
|
|
- <!-- <p v-else-if="item.fixToolTip" v-tip.same :data-txt="scope.row[item.prop]" @click="item.click ? item.click() : null">
|
|
|
+ <!-- <p v-else-if="item.format" @click='item.click?item.click():null'>{{item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')}}</p> -->
|
|
|
+ <!-- 默认显示 -->
|
|
|
+ <el-tooltip
|
|
|
+ v-else-if="!item.slot && !item.format && isIE"
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom"
|
|
|
+ :disabled="scope.row[item.prop] && scope.row[item.prop].length < 2"
|
|
|
+ :content="scope.row[item.prop]"
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ @click="item.click ? item.click() : null"
|
|
|
+ v-html="scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')"
|
|
|
+ ></p>
|
|
|
+ </el-tooltip>
|
|
|
+ <p
|
|
|
+ v-else
|
|
|
+ @click="item.click ? item.click() : null"
|
|
|
+ v-html="scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')"
|
|
|
+ ></p>
|
|
|
+ <!-- <p v-else-if="item.fixToolTip" v-tip.same :data-txt="scope.row[item.prop]" @click="item.click ? item.click() : null">
|
|
|
{{ scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-') }}
|
|
|
</p> -->
|
|
|
- <!-- <p v-else v-tip :data-txt="scope.row[item.prop]" @click="item.click ? item.click() : null">
|
|
|
+ <!-- <p v-else v-tip :data-txt="scope.row[item.prop]" @click="item.click ? item.click() : null">
|
|
|
{{ scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-') }}
|
|
|
</p> -->
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="foot" v-if="!settings.hideFoot">
|
|
|
- <!-- 手动全选及操作 -->
|
|
|
- <!-- <div v-if="false" class="selectAll" :class="{ hasIndex: settings.showIndex }">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ class="foot"
|
|
|
+ v-if="!settings.hideFoot"
|
|
|
+ >
|
|
|
+ <!-- 手动全选及操作 -->
|
|
|
+ <!-- <div v-if="false" class="selectAll" :class="{ hasIndex: settings.showIndex }">
|
|
|
<el-checkbox v-if="checkHide()" v-model="isSelectAll" @change="checkAllChange"></el-checkbox>
|
|
|
<el-tooltip class="item" effect="light" content="展示/隐藏" placement="bottom">
|
|
|
<span :class="checkHide()?'batch_display':'batch_collapse'" class="batch_button" @click="hideordisplay"></span>
|
|
|
</el-tooltip>
|
|
|
<slot v-if="checkHide()" name="batchtodo"></slot>
|
|
|
</div> -->
|
|
|
- <el-pagination
|
|
|
- v-if="pageset.hasOwnProperty('total') && !settings.hidePagination"
|
|
|
- class="pagination"
|
|
|
- background
|
|
|
- @size-change="sizeChange"
|
|
|
- @current-change="currentChange"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-sizes="pageset.pageSizes || [15, 30, 60, 120]"
|
|
|
- :page-size="pageset.pageSize || 15"
|
|
|
- :total="pageset.total || 0"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
+ <el-pagination
|
|
|
+ v-if="pageset.hasOwnProperty('total') && !settings.hidePagination"
|
|
|
+ class="pagination"
|
|
|
+ background
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="pageset.pageSizes || [15, 30, 60, 120]"
|
|
|
+ :page-size="pageset.pageSize || 15"
|
|
|
+ :total="pageset.total || 0"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'zz-table',
|
|
|
- props: {
|
|
|
- /*
|
|
|
- table例设置
|
|
|
- [{
|
|
|
- label: 例名. 必须. String
|
|
|
- prop: 数据字段. 必须. String
|
|
|
- fixed: 当前例是否固定. 值有left,right。 String
|
|
|
- width: 例宽. Number
|
|
|
- slot: 插槽方式, String
|
|
|
- format: 数据过滤方法, Function
|
|
|
- click: 当前内容的点击事件, Function
|
|
|
+ name: 'zz-table',
|
|
|
+ props: {
|
|
|
+ /*
|
|
|
+table例设置
|
|
|
+[{
|
|
|
+ label: 例名. 必须. String
|
|
|
+ prop: 数据字段. 必须. String
|
|
|
+ fixed: 当前例是否固定. 值有left,right。 String
|
|
|
+ width: 例宽. Number
|
|
|
+ slot: 插槽方式, String
|
|
|
+ format: 数据过滤方法, Function
|
|
|
+ click: 当前内容的点击事件, Function
|
|
|
|
|
|
- }]
|
|
|
- */
|
|
|
- cols: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- /*
|
|
|
- table数据
|
|
|
- */
|
|
|
- data: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- /*
|
|
|
- table表格设置
|
|
|
- */
|
|
|
- settings: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {
|
|
|
- // 是否显示表头
|
|
|
- showHeader: true,
|
|
|
- // 是否显示序号
|
|
|
- showIndex: false,
|
|
|
- // 是否显示序列号大写
|
|
|
- showNUmber: false,
|
|
|
- // 序列号宽度
|
|
|
- showNumberWidth: '70',
|
|
|
- // 是否显示多选框
|
|
|
- showCheckbox: false,
|
|
|
- hideAllCheckbox: false,
|
|
|
- // 是否显示单选框
|
|
|
- showRadio: false,
|
|
|
- // 需要统计列的prop集合，从0开始
|
|
|
- summaryCol: [],
|
|
|
- // 是否显示边框
|
|
|
- tableBorder: false
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- /*
|
|
|
- 分页设置
|
|
|
- */
|
|
|
- pageset: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {
|
|
|
- total: 0,
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- pageSizes: [15, 30, 60, 120]
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- loading: {
|
|
|
- type: Boolean,
|
|
|
- default() {
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- height: 0,
|
|
|
- updateFlag: false, //触发表格重绘
|
|
|
- // 统计数据.传入统计数据则显示该统计数据，否则显示现有列表数据
|
|
|
- summaryData: {},
|
|
|
- // 判断多选框是否可以勾选
|
|
|
- selectable: {
|
|
|
- type: Function,
|
|
|
- default() {
|
|
|
- return (row, index) => {
|
|
|
- return true;
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- expands: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- treeProps: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {};
|
|
|
- }
|
|
|
- },
|
|
|
- load: {
|
|
|
- type: Function,
|
|
|
- default() {
|
|
|
- return () => {};
|
|
|
- }
|
|
|
- },
|
|
|
- emptyText: {
|
|
|
- type: String,
|
|
|
- default() {
|
|
|
- return '暂无相关结果';
|
|
|
- }
|
|
|
- }
|
|
|
+}]
|
|
|
+*/
|
|
|
+ cols: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
},
|
|
|
- data() {
|
|
|
+ /*
|
|
|
+table数据
|
|
|
+*/
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /*
|
|
|
+table表格设置
|
|
|
+*/
|
|
|
+ settings: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
return {
|
|
|
- isIE: false,
|
|
|
- radioSelect: '',
|
|
|
- boxHeight: null,
|
|
|
- currentPage: 1,
|
|
|
- isSelectAll: false,
|
|
|
- isScroll: false,
|
|
|
- hideornot: true
|
|
|
+ // 是否显示表头
|
|
|
+ showHeader: true,
|
|
|
+ // 是否显示序号
|
|
|
+ showIndex: false,
|
|
|
+ // 是否显示序列号大写
|
|
|
+ showNUmber: false,
|
|
|
+ // 序列号宽度
|
|
|
+ showNumberWidth: '70',
|
|
|
+ // 是否显示多选框
|
|
|
+ showCheckbox: false,
|
|
|
+ hideAllCheckbox: false,
|
|
|
+ // 是否显示单选框
|
|
|
+ showRadio: false,
|
|
|
+ // 需要统计列的prop集合，从0开始
|
|
|
+ summaryCol: [],
|
|
|
+ // 是否显示边框
|
|
|
+ tableBorder: false
|
|
|
};
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- checkHide() {
|
|
|
- if (this.settings.showCheckbox && this.hideornot) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- hideordisplay() {
|
|
|
- this.hideornot = !this.hideornot;
|
|
|
- },
|
|
|
- setRadioIndex(index) {
|
|
|
- this.radioSelect = index;
|
|
|
- },
|
|
|
- sortChange(column, prop, order) {
|
|
|
- //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
|
|
|
- // console.log(column + '---' + column.prop + '---' + column.order)
|
|
|
- const data = JSON.parse(JSON.stringify(column));
|
|
|
- data.prop = (data.prop && data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()) || null;
|
|
|
- if (this.settings.defaultSort && this.settings.defaultSort.propExtend) {
|
|
|
- data.prop = `${data.prop}${this.settings.defaultSort.propExtend}`;
|
|
|
- }
|
|
|
- data.order = data.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : null;
|
|
|
- this.$emit('sort-change', data);
|
|
|
- },
|
|
|
- toggleRow(row, expandedRows) {
|
|
|
- // this.expands = [];
|
|
|
- const index = _.findIndex(expandedRows, (v) => v.id == row.id);
|
|
|
- if (index != -1) {
|
|
|
- this.expands.push(row.id);
|
|
|
- this.$emit('toggle-change', row);
|
|
|
- } else {
|
|
|
- this.expands = _.filter(this.expands, (v) => v != row.id);
|
|
|
- }
|
|
|
- },
|
|
|
- // 多选派发事件selection-change
|
|
|
- selectionChange(val) {
|
|
|
- this.isSelectAll = val.length == this.data.length;
|
|
|
- this.$emit('selection-change', val);
|
|
|
- },
|
|
|
- /*
|
|
|
- 页数改变时，派发pageChange事件，并传递当前分页参数；
|
|
|
- 其中pageSize为每页显示多少条数据，page为当前显示多少页
|
|
|
- */
|
|
|
- sizeChange(pageSize) {
|
|
|
- this.$emit('page-change', {
|
|
|
- pageSize: pageSize
|
|
|
- });
|
|
|
- },
|
|
|
- currentChange(page) {
|
|
|
- this.currentPage = page;
|
|
|
- this.$emit('page-change', {
|
|
|
- page: page
|
|
|
- });
|
|
|
- },
|
|
|
- // 合计
|
|
|
- getSummaries(params) {
|
|
|
- let { data } = params;
|
|
|
- if ('{}' != JSON.stringify(this.summaryData)) {
|
|
|
- data = [this.summaryData];
|
|
|
- }
|
|
|
- let sums = [];
|
|
|
- sums[0] = '合计';
|
|
|
- let cols = JSON.parse(JSON.stringify(this.settings.summaryCol));
|
|
|
- let i = cols.length;
|
|
|
- while (i--) {
|
|
|
- // 计算当前列的prop字段
|
|
|
- let index = cols[i];
|
|
|
- if (this.settings.showIndex) {
|
|
|
- index -= 1;
|
|
|
- }
|
|
|
- if (this.settings.showCheckbox) {
|
|
|
- index -= 1;
|
|
|
- }
|
|
|
- if (this.settings.showRadio) {
|
|
|
- index -= 1;
|
|
|
- }
|
|
|
- let prop = this.cols[index].prop;
|
|
|
- const values = data.map((item) => Number(item[prop]));
|
|
|
- if (!values.every((value) => isNaN(value))) {
|
|
|
- sums[cols[i]] = values.reduce((prev, curr) => {
|
|
|
- const value = Number(curr);
|
|
|
- if (!isNaN(value)) {
|
|
|
- let sumVa = Number(prev) + curr;
|
|
|
- return sumVa.toFixed(2);
|
|
|
- } else {
|
|
|
- return Number(prev.toFixed(2));
|
|
|
- }
|
|
|
- }, 0);
|
|
|
- sums[cols[i]];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return sums;
|
|
|
- },
|
|
|
- checkAllChange(val) {
|
|
|
- if (val) {
|
|
|
- this.$refs.table.toggleAllSelection();
|
|
|
+ /*
|
|
|
+分页设置
|
|
|
+*/
|
|
|
+ pageset: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSizes: [15, 30, 60, 120]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default () {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ height: 0,
|
|
|
+ updateFlag: false, //触发表格重绘
|
|
|
+ // 统计数据.传入统计数据则显示该统计数据，否则显示现有列表数据
|
|
|
+ summaryData: {},
|
|
|
+ // 判断多选框是否可以勾选
|
|
|
+ selectable: {
|
|
|
+ type: Function,
|
|
|
+ default () {
|
|
|
+ return (row, index) => {
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ expands: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ treeProps: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ load: {
|
|
|
+ type: Function,
|
|
|
+ default () {
|
|
|
+ return () => { };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emptyText: {
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return '暂无相关结果';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isIE: false,
|
|
|
+ radioSelect: '',
|
|
|
+ boxHeight: null,
|
|
|
+ currentPage: 1,
|
|
|
+ isSelectAll: false,
|
|
|
+ isScroll: false,
|
|
|
+ hideornot: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkHide () {
|
|
|
+ if (this.settings.showCheckbox && this.hideornot) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideordisplay () {
|
|
|
+ this.hideornot = !this.hideornot;
|
|
|
+ },
|
|
|
+ setRadioIndex (index) {
|
|
|
+ this.radioSelect = index;
|
|
|
+ },
|
|
|
+ sortChange (column, prop, order) {
|
|
|
+ //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
|
|
|
+ // console.log(column + '---' + column.prop + '---' + column.order)
|
|
|
+ const data = JSON.parse(JSON.stringify(column));
|
|
|
+ data.prop = (data.prop && data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()) || null;
|
|
|
+ if (this.settings.defaultSort && this.settings.defaultSort.propExtend) {
|
|
|
+ data.prop = `${data.prop}${this.settings.defaultSort.propExtend}`;
|
|
|
+ }
|
|
|
+ data.order = data.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : null;
|
|
|
+ this.$emit('sort-change', data);
|
|
|
+ },
|
|
|
+ toggleRow (row, expandedRows) {
|
|
|
+ // this.expands = [];
|
|
|
+ const index = _.findIndex(expandedRows, (v) => v.id == row.id);
|
|
|
+ if (index != -1) {
|
|
|
+ this.expands.push(row.id);
|
|
|
+ this.$emit('toggle-change', row);
|
|
|
+ } else {
|
|
|
+ this.expands = _.filter(this.expands, (v) => v != row.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 多选派发事件selection-change
|
|
|
+ selectionChange (val) {
|
|
|
+ this.isSelectAll = val.length == this.data.length;
|
|
|
+ this.$emit('selection-change', val);
|
|
|
+ },
|
|
|
+ /*
|
|
|
+页数改变时，派发pageChange事件，并传递当前分页参数；
|
|
|
+其中pageSize为每页显示多少条数据，page为当前显示多少页
|
|
|
+*/
|
|
|
+ sizeChange (pageSize) {
|
|
|
+ this.$emit('page-change', {
|
|
|
+ pageSize: pageSize
|
|
|
+ });
|
|
|
+ },
|
|
|
+ currentChange (page) {
|
|
|
+ this.currentPage = page;
|
|
|
+ this.$emit('page-change', {
|
|
|
+ page: page
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 合计
|
|
|
+ getSummaries (params) {
|
|
|
+ let { data } = params;
|
|
|
+ if ('{}' != JSON.stringify(this.summaryData)) {
|
|
|
+ data = [this.summaryData];
|
|
|
+ }
|
|
|
+ let sums = [];
|
|
|
+ sums[0] = '合计';
|
|
|
+ let cols = JSON.parse(JSON.stringify(this.settings.summaryCol));
|
|
|
+ let i = cols.length;
|
|
|
+ while (i--) {
|
|
|
+ // 计算当前列的prop字段
|
|
|
+ let index = cols[i];
|
|
|
+ if (this.settings.showIndex) {
|
|
|
+ index -= 1;
|
|
|
+ }
|
|
|
+ if (this.settings.showCheckbox) {
|
|
|
+ index -= 1;
|
|
|
+ }
|
|
|
+ if (this.settings.showRadio) {
|
|
|
+ index -= 1;
|
|
|
+ }
|
|
|
+ let prop = this.cols[index].prop;
|
|
|
+ const values = data.map((item) => Number(item[prop]));
|
|
|
+ if (!values.every((value) => isNaN(value))) {
|
|
|
+ sums[cols[i]] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ let sumVa = Number(prev) + curr;
|
|
|
+ return sumVa.toFixed(2);
|
|
|
} else {
|
|
|
- this.$refs.table.clearSelection();
|
|
|
- }
|
|
|
- },
|
|
|
- //自定义表头斑马线
|
|
|
- setRowClassName({ row, rowIndex }) {
|
|
|
- let index = rowIndex;
|
|
|
- if (index % 2 == 0) {
|
|
|
- return 'warning-row';
|
|
|
+ return Number(prev.toFixed(2));
|
|
|
}
|
|
|
+ }, 0);
|
|
|
+ sums[cols[i]];
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ return sums;
|
|
|
},
|
|
|
- watch: {
|
|
|
- radioSelect(n) {
|
|
|
- this.$emit('radio-change', this.data[n]);
|
|
|
- },
|
|
|
- pageset: {
|
|
|
- deep: true,
|
|
|
- handler(n) {
|
|
|
- this.currentPage = n.pageNum;
|
|
|
- }
|
|
|
- }
|
|
|
+ checkAllChange (val) {
|
|
|
+ if (val) {
|
|
|
+ this.$refs.table.toggleAllSelection();
|
|
|
+ } else {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ }
|
|
|
},
|
|
|
- components: {
|
|
|
- slotItem: {
|
|
|
- props: ['slots', 'row', 'index'],
|
|
|
- render(h) {
|
|
|
- let vnode = this.slots({
|
|
|
- row: this.row,
|
|
|
- index: this.index
|
|
|
- });
|
|
|
- return h('div', vnode);
|
|
|
- }
|
|
|
- }
|
|
|
+ //自定义表头斑马线
|
|
|
+ setRowClassName ({ row, rowIndex }) {
|
|
|
+ let index = rowIndex;
|
|
|
+ if (index % 2 == 0) {
|
|
|
+ return 'warning-row';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ radioSelect (n) {
|
|
|
+ this.$emit('radio-change', this.data[n]);
|
|
|
},
|
|
|
- created() {
|
|
|
- const userAgent = window.navigator.userAgent;
|
|
|
- const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE<11浏览器
|
|
|
- const isEdge = userAgent.indexOf('Edge') > -1 && !isIE; //判断是否IE的Edge浏览器
|
|
|
- const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
|
|
|
- this.isIE = isIE11 || isEdge || isIE;
|
|
|
+ pageset: {
|
|
|
+ deep: true,
|
|
|
+ handler (n) {
|
|
|
+ this.currentPage = n.pageNum;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ slotItem: {
|
|
|
+ props: ['slots', 'row', 'index'],
|
|
|
+ render (h) {
|
|
|
+ let vnode = this.slots({
|
|
|
+ row: this.row,
|
|
|
+ index: this.index
|
|
|
+ });
|
|
|
+ return h('div', vnode);
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ const userAgent = window.navigator.userAgent;
|
|
|
+ const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE<11浏览器
|
|
|
+ const isEdge = userAgent.indexOf('Edge') > -1 && !isIE; //判断是否IE的Edge浏览器
|
|
|
+ const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
|
|
|
+ this.isIE = isIE11 || isEdge || isIE;
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
