苏州自助建站模板,网站建设 技术方案模板,wordpress类目权限,河南省城乡与住房建设厅网站场景
在使用动态数据渲染的场景#xff0c;el-table设置默认属性default-sort失效。
原因
el-table的default-sort属性是针对静态数据的#xff0c;如果是动态数据#xff0c;default-sort则无法监听到。
案例#xff1a;静态数据
templateel-table:datael-table设置默认属性default-sort失效。
原因
el-table的default-sort属性是针对静态数据的如果是动态数据default-sort则无法监听到。
案例静态数据
templateel-table:datatableData:default-sort{ prop: date, order: descending }stylewidth: 100%el-table-column propdate labelDate sortable width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/templatescript langts setup
interface User {date: stringname: stringaddress: string
}
const tableData: User[] [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},
]
/script默认排序正常
案例模拟动态数据(setTimeout模拟后端延时数据返回)
templateel-tablereftableNode:datatableData:default-sort{ prop: date, order: descending }stylewidth: 100%el-table-column propdate labelDate sortable width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/templatescript langts setup
import { ref, nextTick } from vue
const tableNode ref()
interface User {date: stringname: stringaddress: string
}
let tableData refUser[]([])
setTimeout(function(){tableData.value [{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,}
]
}, 3000)
/script默认排序失效
解决方法
等待数据渲染结束后(nextTick回调)采用el-table提供的sort方法实现手动排序
templateel-tablereftableNode:datatableData:default-sort{ prop: date, order: descending }stylewidth: 100%el-table-column propdate labelDate sortable width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/templatescript langts setup
import { ref, nextTick } from vue
const tableNode ref()
interface User {date: stringname: stringaddress: string
}
let tableData refUser[]([])
setTimeout(async function(){tableData.value [{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,}
]
await nextTick()
tableNode.value.sort(date, descending)
}, 3000)
/script默认排序正常
