目前ant design vue3.X 版本已经实现了多字段排序,另外像vux-table 这样的字段都是支持的
自己纯粹就是想在1.x的基础上实现一下,不做调包侠因为自己不是前端所以下面也只是自己的思路
//Columns 字段列设置title插槽
{
dataIndex: 'sensor_mode',
align: 'center',
width: '160px',
slots: { title: 'sensor_mode_title' },
scopedSlots: {
customRender: 'sensor_mode',
},
},
<!-- html 中的插槽 information是变量点击控制改变颜色 -->
<span slot="sensor_mode_title">
sensor类型
<div style="display: inline-block;vertical-align: middle;">
<a-icon @click="sensorSort" :class="[ information == true ? 'caret-up-class-on' : 'caret-up-class']" type="caret-up"></a-icon>
<a-icon @click="sensorSort" :class="[ information == true ? 'caret-down-class-on' : 'caret-down-class']" type="caret-down"></a-icon>
</div>
</span>
点击触发sensorSort函数改变information 来实现icon 颜色改变
.caret-up-class {
font-size: 10px;
color: #bfbfbf;
display: block;
}
.caret-up-class-on {
font-size: 10px;
color: #13c2c2;
display: block;
}
.caret-down-class {
font-size: 10px;
color: #bfbfbf;
margin-top: -0.125em;
display: block;
}
.caret-down-class-on {
font-size: 10px;
color: #13c2c2;
display: block;
}
未完。。。