blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 07:27:06 +08:00
Code Issues Projects Releases Wiki Activity

修复：AdvanceTable 组件异步获取列配置不生效的问题；🐛 #159 #160 #161

Browse Source 
fix: the async configuration of columns not to take effect in AdvanceTable.vue;
This commit is contained in:
chenghongxing 2020-11-29 11:54:48 +08:00
parent 63ea2a9459
commit 31e22aaf0e
7 changed files with 109 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/table/advance/ActionColumns.vue
View File

@ -49,18 +49,16 @@
checkedCounts(val) {
this.checkAll = val === this.columns.length
this.indeterminate = val > 0 && val < this.columns.length
},
columns(newVal, oldVal) {
if (newVal != oldVal) {
this.checkedCounts = newVal.length
this.formatColumns(newVal)
}
}
},
created() {
this.$emit('update:visibleColumns', [...this.columns])
for (let col of this.columns) {
if (col.visible === undefined) {
this.$set(col, 'visible', true)
}
if (!col.visible) {
this.checkedCounts -= 1
}
}
this.formatColumns(this.columns)
},
methods: {
onCheckChange(e, col) {
@ -126,6 +124,16 @@
conditions[col.dataIndex] = col.search.value
})
return conditions
},
formatColumns(columns) {
for (let col of columns) {
if (col.visible === undefined) {
this.$set(col, 'visible', true)
}
if (!col.visible) {
this.checkedCounts -= 1
}
}
}
}
}

2
src/components/table/advance/AdvanceTable.vue
View File

@ -32,7 +32,7 @@
</div>
</div>
<a-table
v-bind="{...$options.propsData, columns: visibleColumns, title: undefined, loading: false}"
v-bind="{...this.$props, columns: visibleColumns, title: undefined, loading: false}"
:size="sSize"
@expandedRowsChange="onExpandedRowsChange"
@change="onChange"

20
src/components/table/advance/SearchArea.vue
View File

@ -7,7 +7,10 @@
{{col.title}}:
</template>
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
<a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
<a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small"
:checked-children="(col.search.switchOptions && col.search.switchOptions.checkedText) || '是'"
:un-checked-children="(col.search.switchOptions && col.search.switchOptions.uncheckedText) || '否'"
/>
<a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
</div>
<div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
@ -70,12 +73,14 @@
props: ['columns', 'formatConditions'],
inject: ['table'],
created() {
this.columns.forEach(item => {
this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
})
console.log(this.columns)
this.formatColumns(this.columns)
},
watch: {
columns(newVal, oldVal) {
if (newVal != oldVal) {
this.formatColumns(newVal)
}
},
searchCols(newVal, oldVal) {
if (newVal.length != oldVal.length) {
const newConditions = this.getConditions(newVal)
@ -218,6 +223,11 @@
return true
}
return false
},
formatColumns(columns) {
columns.forEach(item => {
this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
})
}
}
}

55
src/mock/goods/index.js
View File

@ -48,4 +48,59 @@ Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/goods` + '.*'),'get', ({ur
list: result
}
}
})
const columnsConfig = [
{
title: '商品名称',
dataIndex: 'name',
searchAble: true
},
{
title: '订单号',
dataIndex: 'orderId'
},
{
searchAble: true,
dataIndex: 'status',
dataType: 'select',
slots: {title: 'statusTitle'},
scopedSlots: {customRender: 'status'},
search: {
selectOptions: [
{title: '已下单', value: 1},
{title: '已付款', value: 2},
{title: '已审核', value: 3},
// {title: '已发货', value: 4}
]
}
},
{
title: '发货',
searchAble: true,
dataIndex: 'send',
dataType: 'boolean',
scopedSlots: {customRender: 'send'}
},
{
title: '发货时间',
dataIndex: 'sendTime',
dataType: 'datetime'
},
{
title: '下单日期',
searchAble: true,
dataIndex: 'orderDate',
dataType: 'date',
visible: false
},
{
title: '审核时间',
dataIndex: 'auditTime',
dataType: 'time',
},
]
Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/columns`, 'get', () => {
return columnsConfig
})

28
src/pages/components/table/Table.vue
View File

@ -90,24 +90,19 @@
searchAble: true,
dataIndex: 'send',
dataType: 'boolean',
scopedSlots: {customRender: 'send'}
},
{
title: '发货时间',
dataIndex: 'sendTime',
dataType: 'datetime'
},
{
title: '下单日期',
searchAble: true,
dataIndex: 'orderDate',
dataType: 'date'
scopedSlots: {customRender: 'send'},
search: {
switchOptions: {
checkedText: '开',
uncheckedText: '关'
}
}
},
{
title: '审核时间',
dataIndex: 'auditTime',
dataType: 'time',
},
}
],
dataSource: [],
conditions: {}
@ -115,6 +110,7 @@
},
created() {
this.getGoodList()
this.getColumns()
},
methods: {
getGoodList() {
@ -129,8 +125,12 @@
this.loading = false
})
},
getColumns() {
ds.goodsColumns().then(res => {
this.columns = res.data
})
},
onSearch(conditions, searchOptions) {
console.log(conditions)
console.log(searchOptions)
this.page = 1
this.conditions = conditions

1
src/services/api.js
View File

@ -6,4 +6,5 @@ module.exports = {
LOGIN: `${BASE_URL}/login`,
ROUTES: `${BASE_URL}/routes`,
GOODS: `${BASE_URL}/goods`,
GOODS_COLUMNS: `${BASE_URL}/columns`,
}

8
src/services/dataSource.js
View File

@ -1,8 +1,12 @@
import {GOODS} from './api'
import {GOODS, GOODS_COLUMNS} from './api'
import {METHOD, request} from '@/utils/request'
export async function goodsList(params) {
return request(GOODS, METHOD.GET, params)
}
export default {goodsList}
export async function goodsColumns() {
return request(GOODS_COLUMNS, METHOD.GET)
}
export default {goodsList, goodsColumns}