在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue怎么去實現(xiàn)動態(tài)的狀態(tài)tab欄切換,求大牛

vue怎么去實現(xiàn)動態(tài)的狀態(tài)tab欄切換,求大牛

圖片描述

初學(xué)vue,tab欄這里知道原理,寫3條數(shù)據(jù)動態(tài)的去改變tableData里面的數(shù)據(jù),但是寫不出來,求大佬,指點下,有dome介紹介紹dome指教指教圖片描述

回答
編輯回答
雨蝶

tab-click的那個handle方法會回傳你一個index告訴你點擊的是哪個tab

2017年8月30日 23:47
編輯回答
浪婳

直接復(fù)制粘貼運(yùn)行便可看到效果，希望能對你有多幫助：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tabs</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" >
</head>
<body>
    <div id="app">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="日期" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" :formatter="formatter">
                    </el-table-column>
                    <el-table-column prop="tag" label="標(biāo)簽" width="100" :filters="[{ text: '啟用中', value: '啟用中' }, { text: '已停用', value: '已停用' }]" :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                            :type="scope.row.tag === '啟用中' ? 'primary' : 'success'"
                            close-transition>{{scope.row.tag}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="啟用中" name="second">
                <el-table :data="tableData | filterData('second')" style="width: 100%">
                    <el-table-column prop="date" label="日期" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" :formatter="formatter">
                    </el-table-column>
                    <el-table-column prop="tag" label="標(biāo)簽" width="100" :filters="[{ text: '啟用中', value: '啟用中' }, { text: '已停用', value: '已停用' }]" :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                            :type="scope.row.tag === '啟用中' ? 'primary' : 'success'"
                            close-transition>{{scope.row.tag}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已停用" name="third">
                <el-table :data="tableData | filterData('third')" style="width: 100%">
                    <el-table-column prop="date" label="日期" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" :formatter="formatter">
                    </el-table-column>
                    <el-table-column prop="tag" label="標(biāo)簽" width="100" :filters="[{ text: '啟用中', value: '啟用中' }, { text: '已停用', value: '已停用' }]" :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                            :type="scope.row.tag === '啟用中' ? 'primary' : 'success'"
                            close-transition>{{scope.row.tag}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data() {
                return {
                    activeName: 'first',
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        tag: '啟用中'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1517 弄',
                        tag: '已停用'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1519 弄',
                        tag: '啟用中'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1516 弄',
                        tag: '已停用'
                    }]
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                },
                formatter(row, column) {
                    return row.address;
                },
                filterTag(value, row) {
                    return row.tag === value;
                }
            },
            filters: {
                filterData(value, tags) {
                    var buff = [];
                    for (var i = 0; i < value.length; i++) {
                        if (tags === "second" && value[i].tag === '啟用中' || tags === "third" && value[i].tag === '已停用') {
                            buff.push(value[i]);
                        }
                    }
                    return buff;
                }
            }
        });
    </script>
</body>
</html>

沒有將表格部分封裝成組件，使用時最好封裝成組件使用，代碼也沒進(jìn)行優(yōu)化，僅提供一個效果和思路。

2017年10月31日 19:25
編輯回答
氕氘氚
// tab-click 這個事件默認(rèn)有兩個參數(shù)
handleClick( tab,event ){
      //console.log(tab); 可以打印看tab里面都有些什么，哪些對你有用
      
      //共用一個表格 只是數(shù)據(jù)不同而已
      //那就這樣
      this.getDataList(tab.index); //此方法用來獲取表格數(shù)據(jù),傳遞一個參數(shù)，當(dāng)前點擊的是哪個tab
},
getDataList(id){
    //根據(jù)不同選擇傳過來的參數(shù)，發(fā)送請求獲取表格數(shù)據(jù)  
}
2018年5月12日 05:07