这篇文章主要介绍“Vue怎么实现table表格置顶”，在日常操作中，相信很多人在Vue怎么实现table表格置顶问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么实现table表格置顶”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
如何实现table表格置顶
老大让做vue项目，可是我对vue还不熟，抓紧时间学习，记录
此处省略css
<table id="toptable" > <thead> <tr> <th>序号</th> <th>显示顺序</th> <th>景区名称</th> <th>景区地址</th> <th width="230px"></th> </tr> </thead> <tbody> <tr v-for="(item,index) of dataList"> <td v-text="item.code"></td> <td v-text="index+1"></td> <td v-text="item.name"></td> <td v-text="item.region"></td> <td > <button v-if="index !==0" @click="getTop(index)">置顶</button> <button @click="delData(index)">删除</button> </td> </tr> </tbody></table><script> var vtable=new Vue({ el:"#toptable", data:{ dataList:[] }, mounted(){ this.showData(); }, methods:{ showData () { axios.get("arealist.json").then(response=>{ for(let i=0;i<response.data.length;i++){ vtable.dataList.push(response.data[i]); } }) }, deleteData(index){ if(!confirm("您确定要删除此景区吗？")){ return false; } vtable.dataList.splice(index,1); }, getTop(index){ var returnTop=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) {let values = this.tableData;//这个是表格数据let value = row;let res = [value].concat(values.filter(item => item != value));//concat() 方法用于连接两个或多个数组console.log(res);this.tableData = res;}到此，关于“Vue怎么实现table表格置顶”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
