vue+iview动态调整Table的列顺序
需求：因table列太多，且每个部门关注的信息不⼀样，拖来拖去不⽅便观看，客户想让Table列可以拖动，且可以保存顺序。
思路：
<Table :columns="columns" :data="data1"></Table>
Table⾥的columns是提前在data⾥写好的，可以把columns对象转成json字符串存在localStorage或者数据库⾥，vue开始渲染页⾯前修改columns的值(vue⽣命周期)，然后再进⾏渲染，
客户在调整完毕后，重新渲染⼀下Table组件
涉及到的知识点：VUE⽣命周期，localStorage，iView⽂档
我这⾥是另外写⼀个弹窗页modal，操作主页table的列顺序
全部代码：
这部分代码是主页代码，只展⽰了table部分，弹窗页代码在下⾯
orderOK⽅法是弹窗页完成后执⾏，逻辑是给columns赋值，然后改变table的key，使table重新渲染
beforeMount⽅法是vue⽣命周期，具体我也忘了，⼤概应该是vue编译代码⽣成html之前运⾏，读取localStorage，没有就存⼀个，有就⽤有的。
这⾥我只允许调整第⼆列以后的顺序，所以看到 i=2 不要疑惑，业务需要
data () {
return {
tabKey: 0,
tableData: [],
columns:[vuejson转对象
{title: 'Name', key: 'name'},
{title: 'Age',key: 'age'}
]
}
}
<Table :key="tabKey" :data="tableData" :columns="columns"> </Table>
methods: {
orderOk () {
let col = JSON.parse(Item("VoyageCol"))
for (var i = 2; i < col.length; i++) {
}
this.tabKey += 1
this.$Message.success('调整成功')
},
beforeMount () {
if (Item("VoyageCol") == null) {
window.localStorage.setItem("VoyageCol", JSON.lumns));
} else {
let col = JSON.parse(Item("VoyageCol"))
for (var i = 2; i < col.length; i++) {//只调整第⼆列以后的列
}
}
}
}
新增⼀个button按钮，点击出现⼀个弹窗modal，⾥⾯⼀个table，把columns传进去当做table的data（样式在代码后⾯）
这部分代码是弹窗页代码，主要是读取localStorage给他的table当数据进⾏操作，排序完以后点确定再存进去，然后调⽤主页orderOK⽅法刷新主页table
//本来想⾃⼰做按钮实现上移下移，发现iview框架的Table⾃带draggable属性，可以实现⾏的上下拖动，省了⽆数代码
<Modal v-model="modal" title="调整列名顺序" @on-ok="orderOk">
<Table draggable :columns="columns" :data="orderData" height="460" @on-drag-drop="onDragDrop"></Table>
</Modal>
methods: {
orderOk () {
window.localStorage.setItem("VoyageCol", JSON.derData));
this.$emit('orderOk')
},
onDragDrop (first, end) {
//转成int型，⽅便后续使⽤
first = parseInt(first)
end = parseInt(end)
if (first <= 1 || end <= 1) {
this.$Message.warning('前两列禁⽌移动')
} else {
let tmp = derData[first]
if (first < end) {
for (var i = first + 1; i <= end; i++) {
}
}
if (first > end) {
for (var i = first; i > end; i--) {
}
}
}
}
},
mounted () {
}
样式如下:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。