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