<template>
<div :class="$options.name">
<ul>
<li v-for="(a, i) in items" :key="i">
<span v-if="a.topIndex">当前置顶索引topIndex:{{ a.topIndex }}</span>
<span>当前索引index:{{ a.index }}</span>
<label>{{ a.label }}</label>
<el-button v-if="a.topIndex" type="danger" plain @click="unTop(a)">取消置顶</el-button>
<el-button v-else type="primary" plain @click="top(a)">置顶</el-button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
topIndex: 0,//置顶索引
items: [
{ index: 1, label: '显示文本1', },
{ index: 2, label: '显示文本2', },
{ index: 3, label: '显示文本3', },
{ index: 4, label: '显示文本4', },
{ index: 5, label: '显示文本5', },
]
}
},
methods: {
// 对置顶列表进行排序计算
sortTopList(arr) {
arr = JSON.parse(JSON.stringify(arr));
let tops = arr.filter(v => v.topIndex);//筛选出置顶项目
let upTops = arr.filter(v => !v.topIndex);//帅选出未置顶项目
tops.sort((prev, next) => prev.topIndex - next.topIndex);//从小到大升序
upTops.sort((prev, next) => prev.index - next.index);//从小到大升序
return JSON.parse(JSON.stringify(tops.concat(upTops)));
},
//置顶
top(d) {
d.topIndex = --this.topIndex;
this.items = this.sortTopList(this.items);
},
//取消置顶
unTop(d) {
delete d.topIndex;
this.items = this.sortTopList(this.items);
},
}
};
</script>
扩展阅读类比排序列表排序按钮常用方法,实现“向前移动到第一个↑”、“向前移动∧”、“向后移动∨”、“向后移动到最后一个↓”_你挚爱的强哥的博客-CSDN博客【代码】列表排序按钮常用方法,实现“向前移动到第一个↑”、“向前移动∧”、“向后移动∨”、“向后移动到最后一个↓”https://blog.csdn.net/qq_37860634/article/details/131930996 用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)_dragstarte-CSDN博客文章浏览阅读482次,点赞8次,收藏7次。将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)-CSDN博客。【代码】将数组指定索引位置的元素 移动到 目标索引位置(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)_dragstartehttps://blog.csdn.net/qq_37860634/article/details/136788464