|
@@ -17,10 +17,11 @@
|
|
:row-style-option="{clickHighlight: true}"
|
|
:row-style-option="{clickHighlight: true}"
|
|
:cellSelectionOption="{enable: false}"
|
|
:cellSelectionOption="{enable: false}"
|
|
:virtual-scroll-option="{enable: true}"
|
|
:virtual-scroll-option="{enable: true}"
|
|
|
|
+ :sort-option="sortOption"
|
|
/>
|
|
/>
|
|
<div v-show="localDataSource.length==0" :style="{height:scroll.y+'px'}" class="empty-data"><a-empty description="暂无数据" :image="simpleImage"/></div>
|
|
<div v-show="localDataSource.length==0" :style="{height:scroll.y+'px'}" class="empty-data"><a-empty description="暂无数据" :image="simpleImage"/></div>
|
|
- <div class="ve-pagination">
|
|
+ <div class="ve-pagination" :class="'ve-pagination-align-'+pageAlign">
|
|
- <div class="ve-page-left"></div>
|
|
+ <div class="ve-page-left" v-if="pageAlign=='left'"><slot name="page"></slot></div>
|
|
<a-pagination
|
|
<a-pagination
|
|
v-show="showPagination"
|
|
v-show="showPagination"
|
|
size="small"
|
|
size="small"
|
|
@@ -34,6 +35,7 @@
|
|
show-size-changer
|
|
show-size-changer
|
|
@showSizeChange="paginationShowSizeChange"
|
|
@showSizeChange="paginationShowSizeChange"
|
|
/>
|
|
/>
|
|
|
|
+ <div class="ve-page-right" v-if="pageAlign=='right'"><slot name="page"></slot></div>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</a-spin>
|
|
</div>
|
|
</div>
|
|
@@ -44,40 +46,54 @@ import { Empty } from 'ant-design-vue'
|
|
export default {
|
|
export default {
|
|
name: 'VTable',
|
|
name: 'VTable',
|
|
props: {
|
|
props: {
|
|
|
|
+ // 列
|
|
columns: {
|
|
columns: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => []
|
|
default: () => []
|
|
},
|
|
},
|
|
|
|
+ // load data function
|
|
data: {
|
|
data: {
|
|
type: Function,
|
|
type: Function,
|
|
required: true
|
|
required: true
|
|
},
|
|
},
|
|
|
|
+ // 默认是否加载表格数据
|
|
|
|
+ defaultLoadData: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ // 表格宽度和高度
|
|
scroll: {
|
|
scroll: {
|
|
type: Object,
|
|
type: Object,
|
|
default: () => ({ x: 0, y: 400 })
|
|
default: () => ({ x: 0, y: 400 })
|
|
},
|
|
},
|
|
|
|
+ // 是否显示边框
|
|
bordered: {
|
|
bordered: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true
|
|
default: true
|
|
},
|
|
},
|
|
- defaultLoadData: {
|
|
+ // 表格默认key name
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
rowKeyName: {
|
|
rowKeyName: {
|
|
type: String,
|
|
type: String,
|
|
default: 'id'
|
|
default: 'id'
|
|
},
|
|
},
|
|
|
|
+ // 默认隐藏的列,传 filed 值
|
|
defaultHiddenColumnKeys: {
|
|
defaultHiddenColumnKeys: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => []
|
|
default: () => []
|
|
},
|
|
},
|
|
|
|
+ // 分页配置
|
|
pagination: {
|
|
pagination: {
|
|
type: Object
|
|
type: Object
|
|
},
|
|
},
|
|
|
|
+ // 是否显示分页
|
|
showPagination: {
|
|
showPagination: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true
|
|
default: true
|
|
|
|
+ },
|
|
|
|
+ // 分页对齐方式,left ,center,right
|
|
|
|
+ pageAlign: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: 'center'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -105,6 +121,15 @@ export default {
|
|
// default hidden column keys
|
|
// default hidden column keys
|
|
defaultHiddenColumnKeys: this.defaultHiddenColumnKeys
|
|
defaultHiddenColumnKeys: this.defaultHiddenColumnKeys
|
|
},
|
|
},
|
|
|
|
+ // 排序
|
|
|
|
+ sortOption: {
|
|
|
|
+ // sort always
|
|
|
|
+ sortAlways: false,
|
|
|
|
+ sortChange: (params) => {
|
|
|
|
+ this.sortChange(params)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 分页
|
|
localPagination: Object.assign({
|
|
localPagination: Object.assign({
|
|
current: 1,
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
@@ -126,9 +151,10 @@ export default {
|
|
for (let i = 0; i < columns.length; i++) {
|
|
for (let i = 0; i < columns.length; i++) {
|
|
const item = columns[i]
|
|
const item = columns[i]
|
|
ret.push({
|
|
ret.push({
|
|
- field: item.dataIndex,
|
|
+ field: item.field || item.dataIndex,
|
|
- key: 'col-' + i,
|
|
+ key: item.key || 'col-' + i,
|
|
title: item.title,
|
|
title: item.title,
|
|
|
|
+ // 自定义头部单元格表头
|
|
renderHeaderCell: ({ column }, h) => {
|
|
renderHeaderCell: ({ column }, h) => {
|
|
if (item.slots) {
|
|
if (item.slots) {
|
|
return _this.$scopedSlots[item.slots.title]()
|
|
return _this.$scopedSlots[item.slots.title]()
|
|
@@ -143,6 +169,7 @@ export default {
|
|
width: item.width.indexOf('%') >= 0 ? item.width.replace('%', '') * 12 : item.width, // 百分比转数字
|
|
width: item.width.indexOf('%') >= 0 ? item.width.replace('%', '') * 12 : item.width, // 百分比转数字
|
|
align: item.align,
|
|
align: item.align,
|
|
fixed: item.fixed,
|
|
fixed: item.fixed,
|
|
|
|
+ sortBy: item.sortBy || item.sorter ? '' : undefined,
|
|
children: item.children ? _this.convertColumns(item.children) : undefined,
|
|
children: item.children ? _this.convertColumns(item.children) : undefined,
|
|
// 自定义单元格
|
|
// 自定义单元格
|
|
scopedSlotsKey: item.scopedSlots && item.scopedSlots.customRender,
|
|
scopedSlotsKey: item.scopedSlots && item.scopedSlots.customRender,
|
|
@@ -184,20 +211,11 @@ export default {
|
|
loadData (pagination, filters, sorter) {
|
|
loadData (pagination, filters, sorter) {
|
|
this.localLoading = true
|
|
this.localLoading = true
|
|
const parameter = Object.assign({
|
|
const parameter = Object.assign({
|
|
- pageNo: this.showPagination && pagination && pagination.pageSize != this.localPagination.pageSize ? 1 : (pagination && pagination.current) || this.showPagination && this.localPagination.current,
|
|
+ pageNo: this.showPagination && this.localPagination.current || 1,
|
|
- pageSize: (pagination && pagination.pageSize) || this.showPagination && this.localPagination.pageSize
|
|
+ pageSize: this.showPagination && this.localPagination.pageSize || 10
|
|
},
|
|
},
|
|
- (sorter ? sorter.field && { sortField: sorter.field } : this.sortObj && { sortField: this.sortObj.field }) || {},
|
|
+ this.sortObj && { sortField: this.sortObj.field, sortOrder: this.sortObj.order } || {}
|
|
- (sorter ? sorter.order && { sortOrder: sorter.order } : this.sortObj && { sortOrder: this.sortObj.order }) || {},
|
|
|
|
- { ...filters }
|
|
|
|
)
|
|
)
|
|
- // 缓存排序参数
|
|
|
|
- if (sorter) {
|
|
|
|
- this.sortObj = {
|
|
|
|
- field: sorter.field || '',
|
|
|
|
- order: sorter.order || ''
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
const result = this.data(parameter)
|
|
const result = this.data(parameter)
|
|
// 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.count, r.data
|
|
// 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.count, r.data
|
|
if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
|
|
if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
|
|
@@ -207,7 +225,7 @@ export default {
|
|
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
|
|
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
|
|
current: r.pageNo || 1, // 返回结果中的当前分页数
|
|
current: r.pageNo || 1, // 返回结果中的当前分页数
|
|
total: Number(r.count) || 0, // 返回结果中的总记录数
|
|
total: Number(r.count) || 0, // 返回结果中的总记录数
|
|
- pageSize: r.pageSize || (pagination && pagination.pageSize) || this.localPagination.pageSize
|
|
+ pageSize: r.pageSize || this.localPagination.pageSize
|
|
}) || false
|
|
}) || false
|
|
|
|
|
|
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
|
|
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
|
|
@@ -243,6 +261,19 @@ export default {
|
|
this.localPagination.pageSize = pageSize
|
|
this.localPagination.pageSize = pageSize
|
|
this.loadData()
|
|
this.loadData()
|
|
},
|
|
},
|
|
|
|
+ // 排序
|
|
|
|
+ sortChange (params) {
|
|
|
|
+ this.sortObj = null
|
|
|
|
+ for (const a in params) {
|
|
|
|
+ if (params[a]) {
|
|
|
|
+ this.sortObj = {
|
|
|
|
+ field: a,
|
|
|
|
+ order: params[a] + 'end'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
/**
|
|
/**
|
|
* 表格重新加载方法
|
|
* 表格重新加载方法
|
|
* 如果参数为 true, 则强制刷新到第一页
|
|
* 如果参数为 true, 则强制刷新到第一页
|
|
@@ -300,10 +331,18 @@ export default {
|
|
}
|
|
}
|
|
.ve-pagination{
|
|
.ve-pagination{
|
|
display:flex;
|
|
display:flex;
|
|
- justify-content: space-between;
|
|
|
|
align-items: center;
|
|
align-items: center;
|
|
padding: 20px 0 10px 0;
|
|
padding: 20px 0 10px 0;
|
|
}
|
|
}
|
|
|
|
+ .ve-pagination-align-right{
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ }
|
|
|
|
+ .ve-pagination-align-left{
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ }
|
|
|
|
+ .ve-pagination-align-center{
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
/deep/ .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td,
|
|
/deep/ .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td,
|
|
.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.ve-table-body-td{
|
|
.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.ve-table-body-td{
|
|
div:empty::before {
|
|
div:empty::before {
|