Vue怎么实现table表格置顶(table,vue,开发技术)

如何实现table表格置顶

老大让做vue项目，可是我对vue还不熟，抓紧时间学习，记录

此处省略css

<tableid="toptable"><thead><tr><th>序号</th><th>显示顺序</th><th>景区名称</th><th>景区地址</th><thwidth="230px"></th></tr></thead><tbody><trv-for="(item,index)ofdataList"><tdv-text="item.code"></td><tdv-text="index+1"></td><tdv-text="item.name"></td><tdv-text="item.region"></td><td><buttonv-if="index!==0"@click="getTop(index)">置顶</button><button@click="delData(index)">删除</button></td></tr></tbody></table>

<script>varvtable=newVue({el:"#toptable",data:{dataList:[]},mounted(){this.showData();},methods:{showData(){axios.get("arealist.json").then(response=>{for(leti=0;i<response.data.length;i++){vtable.dataList.push(response.data[i]);}})},deleteData(index){if(!confirm("您确定要删除此景区吗？")){returnfalse;}vtable.dataList.splice(index,1);},getTop(index){varreturnTop=vp.dataList[index];vtable.dataList.splice(index,1)vtable.dataList.unshift(returnTop);}}})</script>

[{"name":"狼牙山景区","code":"00123545","region":"保定易县"},{"name":"白洋淀","code":"00343445","region":"保定白洋淀"},{"name":"野山坡","code":"00123598","region":"保定涞水"}]

置顶前

置顶后

点击table表格某一行让其置顶

我这里的使用场景是点击某一行的使用，该行的数据就调整在第一行显示了

//给使用按钮添加方法，方法如下use(row){ letvalues=this.tableData;//这个是表格数据 letvalue=row; letres=[value].concat(values.filter(item=>item!=value));//concat()方法用于连接两个或多个数组 console.log(res); this.tableData=res;}