Vue怎么实现table表格置顶

这篇文章主要介绍"Vue怎么实现table表格置顶"，在日常操作中，相信很多人在Vue怎么实现table表格置顶问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue怎么实现table表格置顶"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

如何实现table表格置顶

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

此处省略css

    
        
            
序号
            
显示顺序
            
景区名称
            
景区地址
            
        
    
    
        
            
            
            
            
            
                置顶                删除            
        
    

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