前端实现置顶、排序、显示序号功能

杨梦馨2023-12-12 15:26

数组置顶

获取要置顶元素的索引 index, 删除当前元素，并在原数组前面加上该数组

css 复制代码

let arr = ['a','b','c','d','e','f','g']
arr.unshift(arr.splice(3,1)[0]) // 置顶索引为3的'd'
console.log(arr) // ["d", "a", "b", "c", "e", "f", "g"]

列表排序

效果是更改排序，实则是交换相邻两个元素的位置

ini 复制代码

<!-- 向下箭头 -->
<i class="el-icon-bottom"
  v-show="scope.$index !== list.length-1"
  @click="chgOrder(scope, 'down', 'doctor', list)">
</i>
<!-- 向上箭头 -->
<i class="el-icon-top"
  v-show="scope.$index !== 0"
  @click="chgOrder(scope, 'up', 'doctor', list)">
</i>

/**
 * 更改排序 
 * @val -> 'up'/'down' 上窜下移; 
 * @tableData 列表数据
 */
chgOrder({ $index, row }, val, tableData) {
  let secondIndex = null
  if (val === 'down' && $index < tableData.length-1) {
    // 往下窜
    secondIndex = $index + 1
  } else if (val === 'up' && $index > 0) {
    // 往上移
    secondIndex = $index - 1
  }
  [tableData[$index], tableData[secondIndex]] = [tableData[secondIndex], tableData[$index]]
  this.list = [...tableData]
},

列表序号

element-ui <el-table>

ini 复制代码

<el-table-column label="序号" align="center" width="55" fixed>
  <template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>