美文网首页
ant design vue 1.X table 实现多字段排序

ant design vue 1.X table 实现多字段排序

作者: 你好_3821 | 来源:发表于2022-02-15 10:56 被阅读0次

目前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;
}

未完。。。

相关文章

网友评论

      本文标题:ant design vue 1.X table 实现多字段排序

      本文链接:https://www.haomeiwen.com/subject/nowklrtx.html