目录如何实现table表格置顶置顶前置顶后点击table表格某一行让其置顶如何实现table表格置顶 老大让做Vue项目,可是我对vue还不熟,抓紧时间学习,记录 此处省略CSS &
老大让做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 style="text-align: right;">
<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;
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue如何实现table表格置顶
本文链接: https://www.lsjlt.com/news/147023.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0