这篇文章主要介绍“Vue怎么实现table表格置顶”，在日常操作中，相信很多人在Vue怎么实现table表格置顶问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么实现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":"保定 涞水"
}
]
我这里的使用场景是点击某一行的使用，该行的数据就调整在第一行显示了
//给使用按钮添加方法，方法如下
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表格置顶”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
