Vue怎么实现table表格置顶

这篇文章主要介绍“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表格置顶”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！