我的收藏;我的订阅 表格排序问题

This commit is contained in:
zyx.net
2022-12-22 11:13:39 +08:00
parent 41a066f7b6
commit 4f8f1626b6
3 changed files with 53 additions and 0 deletions
@@ -65,6 +65,7 @@
:dataSource="tableData" :dataSource="tableData"
:pagination="false" :pagination="false"
:loading="loading" :loading="loading"
@change="tableOnChange"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
> >
<span slot="serialNumber" slot-scope="text, record"> <span slot="serialNumber" slot-scope="text, record">
@@ -115,6 +116,8 @@
pageSize: 10 pageSize: 10
}, //搜索条件 }, //搜索条件
total: 0, total: 0,
orderBy: '1',
orderByField: '',
//列表表头 //列表表头
columns: [ columns: [
{ {
@@ -123,6 +126,7 @@
key: 'serialNumber', key: 'serialNumber',
scopedSlots: { customRender: 'serialNumber' }, scopedSlots: { customRender: 'serialNumber' },
align: 'center', align: 'center',
sorter:true,
ellipsis: true, ellipsis: true,
width: 180 width: 180
}, },
@@ -139,6 +143,7 @@
align: 'center', align: 'center',
width: 180, width: 180,
ellipsis: true, ellipsis: true,
sorter:true,
dataIndex: 'state' dataIndex: 'state'
}, },
{ {
@@ -146,6 +151,7 @@
align: 'center', align: 'center',
width: 180, width: 180,
ellipsis: true, ellipsis: true,
sorter:true,
dataIndex: 'createTime' dataIndex: 'createTime'
}, },
{ {
@@ -167,9 +173,22 @@
this.loadData() this.loadData()
}, },
methods: { methods: {
tableOnChange(pagination, filters, sorter) {
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
if(sorter.columnKey == 'serialNumber'){
this.orderByField = 'serial_number'
} else if(sorter.columnKey == 'createTime') {
this.orderByField = 'create_time'
} else{
this.orderByField = sorter.columnKey
}
this.loadData()
},
//获取列表数据 //获取列表数据
loadData() { loadData() {
let params = { let params = {
orderBy: this.orderBy,
orderByField: this.orderByField,
...this.queryParams ...this.queryParams
} }
this.loading = true this.loading = true
@@ -68,6 +68,7 @@
:dataSource="tableData" :dataSource="tableData"
:pagination="false" :pagination="false"
:loading="loading" :loading="loading"
@change="tableOnChange"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
> >
<span slot="serialNumber" slot-scope="text, record"> <span slot="serialNumber" slot-scope="text, record">
@@ -114,6 +115,8 @@
pageSize: 10 pageSize: 10
}, //搜索条件 }, //搜索条件
total: 0, total: 0,
orderBy: '1',
orderByField: '',
//列表表头 //列表表头
columns: [ columns: [
{ {
@@ -123,6 +126,7 @@
align: 'center', align: 'center',
width: 180, width: 180,
scopedSlots: { customRender: 'serialNumber' }, scopedSlots: { customRender: 'serialNumber' },
sorter:true,
ellipsis: true ellipsis: true
}, },
{ {
@@ -138,6 +142,7 @@
align: 'center', align: 'center',
width: 180, width: 180,
dataIndex: 'state', dataIndex: 'state',
sorter:true,
ellipsis: true ellipsis: true
}, },
{ {
@@ -145,6 +150,7 @@
align: 'center', align: 'center',
width: 180, width: 180,
dataIndex: 'createTime', dataIndex: 'createTime',
sorter:true,
ellipsis: true ellipsis: true
}, },
{ {
@@ -177,9 +183,22 @@
this.loadData() this.loadData()
}, },
methods: { methods: {
tableOnChange(pagination, filters, sorter) {
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
if(sorter.columnKey == 'serialNumber'){
this.orderByField = 'serial_number'
} else if(sorter.columnKey == 'createTime') {
this.orderByField = 'create_time'
} else{
this.orderByField = sorter.columnKey
}
this.loadData()
},
//获取列表数据 //获取列表数据
loadData() { loadData() {
let params = { let params = {
orderBy: this.orderBy,
orderByField: this.orderByField,
...this.queryParams ...this.queryParams
} }
this.loading = true this.loading = true
@@ -39,6 +39,7 @@
:scroll="{x: '100%',y:'calc(100vh - 158px)'}" :scroll="{x: '100%',y:'calc(100vh - 158px)'}"
rowKey="id" rowKey="id"
:data-source="dataSource" :data-source="dataSource"
@change="tableOnChange"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns" :columns="columns"
> >
@@ -126,6 +127,8 @@
paramsManifestId:'', paramsManifestId:'',
selectedRowKeysArray: '', selectedRowKeysArray: '',
formInline: {}, formInline: {},
orderBy: '1',
orderByField: '',
rules: { rules: {
paramsTemplateName: [ paramsTemplateName: [
{ required: true, message: this.$t('PleaseEnter') + this.$t('templateName'), trigger: 'change' } { required: true, message: this.$t('PleaseEnter') + this.$t('templateName'), trigger: 'change' }
@@ -156,6 +159,7 @@
align: 'center', align: 'center',
width: '17%', width: '17%',
dataIndex: 'projectName', dataIndex: 'projectName',
sorter:true,
scopedSlots: { customRender: 'projectName' } scopedSlots: { customRender: 'projectName' }
}, },
{ {
@@ -304,10 +308,21 @@
// } // }
// }) // })
}, },
tableOnChange(pagination, filters, sorter) {
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
if(sorter.columnKey == 'projectName') {
this.orderByField = 'pageName'
} else{
this.orderByField = sorter.columnKey
}
this.getList()
},
getList() { getList() {
let query = { let query = {
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize,
orderBy: this.orderBy,
orderByField: this.orderByField,
...this.queryParam ...this.queryParam
} }
this.loading = true this.loading = true