Vue如何實現(xiàn)table表格置頂

更新時間：2022年04月23日 14:27:25 作者：洛一一珞

這篇文章主要介紹了Vue如何實現(xiàn)table表格置頂，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何實現(xiàn)table表格置頂

老大讓做vue項目，可是我對vue還不熟，抓緊時間學習，記錄

此處省略css

<table id="toptable" >
    <thead>
        <tr>
            <th>序號</th>
            <th>顯示順序</th>
            <th>景區(qū)名稱</th>
            <th>景區(qū)地址</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("您確定要刪除此景區(qū)嗎？")){
                    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":"狼牙山景區(qū)",
      "code":"00123545",
      "region":"保定 易縣"
    },{
      "name":"白洋淀",
      "code":"00343445",
      "region":"保定 白洋淀"
    },{
      "name":"野山坡",
      "code":"00123598",
      "region":"保定 淶水"
    }
]

置頂前

置頂后

點擊table表格某一行讓其置頂

我這里的使用場景是點擊某一行的使用，該行的數(shù)據(jù)就調整在第一行顯示了

//給使用按鈕添加方法，方法如下
use(row) {
	let values = this.tableData;//這個是表格數(shù)據(jù)
	let value = row;
	let res = [value].concat(values.filter(item => item != value));//concat() 方法用于連接兩個或多個數(shù)組
	console.log(res);
	this.tableData = res;
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: