Vue table表格置顶
洛一一珞 人气:0如何实现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 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":"保定 涞水" } ]
置顶前
置顶后
点击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; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容