在工作中我們總會碰到奇奇怪怪的需求,比如我就碰到了取消elementUI sort-change狀態為null的需求,話不多說直接上代碼
html代碼:
<el-table :data="tableData" style="width:100%" fit @sort-change = "sortChange" ref="table">
</el-table>
vue代碼:
data(){
return {
prevProp: prop, //記錄前一次的prop值,
prevSort: 'descending'//記錄前一次的排序狀態(elementUI默認有三種,即descending,ascending和null)
}
}
methods: {
sortChange({column, prop, order}) {//接收三個參數,分別是當前列的所有屬性值,當前列的prop, 當前列的排序狀態
if (order !== null && this.prevProp !== prop) {
var columns = this.$refs.table.columns.find(item => item.property === this.prevProp);//這里需要注意的是需要給el-table加一個ref屬性
//如果是elementUI表格會有columns屬性,並且該屬性下包含property屬性,不理解的同學可以在控制台打印一下康康
columns.order = '';
}
if (order === null) {
column.order = this.prevSort === 'descending' ? 'ascending' : 'descending';
this.prevProp = prop;
}
//實現取消null狀態的功能后就可以在下面愉快的的玩耍啦~
//dosomething
}
}