修改了列表逻辑，和点击切换

src/views/sets/setList.vue

@@ -35,58 +35,68 @@
                 </div>
             </el-header>
             <el-main style="height: 110px;">
-                <h3 class="el-icon-tickets">套系列表 共有0条数据</h3>
-                <el-button id="main-btu" @click="addNotice()">添加</el-button>
+                <h3 class="el-icon-tickets">套系列表 共有{{ total }}条数据</h3>
+                <el-button id="main-btu" @click="addSet()">添加</el-button>
             </el-main>
             <div class="footer">
-                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-                    <el-tab-pane label="在售" name="first">
-                        <el-table :data="tableData" border style="width: 100%">
-                            <el-table-column prop="date" label="日期" width="180">
-                            </el-table-column>
-                            <el-table-column prop="name" label="姓名" width="180">
-                            </el-table-column>
-                            <el-table-column prop="address" label="地址">
-                            </el-table-column>
-                        </el-table>
-                    </el-tab-pane>
-                    <el-tab-pane label="预售" name="second">预售列表</el-tab-pane>
-                    <el-tab-pane label="已过期" name="third">已过期</el-tab-pane>
-                </el-tabs>
+                <!-- 这破玩意帮点击为啥不好使...... -->
+                <!-- <el-radio-group v-model="tabPosition">
+                                                                     <el-radio-button label="onSale" tab-click="onSale1">在售</el-radio-button>
+                                                                    <el-radio-button label="preSale" @click="preSale()">预售</el-radio-button>
+                                                                         <el-radio-button label="expired" @click="expired()">已过期</el-radio-button>
+                                                                       </el-radio-group> -->
+                <el-row>
+                    <!-- 这块样式需要index没有只能先这么写 -->
+                    <el-button size="small" @click="onSale1()" :class="btnact">在售</el-button>
+                    <el-button size="small" @click="preSale()" :class="btnact1">预售</el-button>
+                    <el-button size="small" @click="expired()" :class="btnact2">已过期</el-button>
+                </el-row>
+                <!-- 非响应式？？‘’‘不是非响应式上面帮点击时间不好使 -->
+                <el-table :data="tableData" border style="width: 100%">
+                    <el-table-column prop="id" label="id" width="110" align="center">
+                    </el-table-column>
+                    <el-table-column prop="name" label="藏品名称(套)" width="280" align="center">
+                    </el-table-column>
+                    <el-table-column prop="time" label="创建时间" width="280" align="center">
+                    </el-table-column>
+                    <el-table-column prop="time2" label="展示时间" width="280" align="center">
+                    </el-table-column>
+                    <el-table-column prop="number" label="藏品数量" width="280" align="center">
+                    </el-table-column>
+                    <el-table-column prop="tai" label="状态" width="280" align="center">
+                    </el-table-column>
+                    <el-table-column prop="edit" label="操作" width="280" align="center">
+                    </el-table-column>
+                </el-table>
             </div>
         </el-container>
     </div>
 </template>
 <script>
-import { getNotice, searchNotice } from "@/api/notice/notice"
 export default {
     data() {
         return {
             anForm: {
                 anName: '',
             },
-
-
             total: 1,
             dataput: '',
             activeName: 'first',
+            //列表
+            tabPosition: 'onSale',
+            //
+            btnact: 'th',
+            btnact1: 'th1',
+            btnact2: 'th2',
             tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
+                id: '17',
+                name: 'wangxiu',
+                time: '20230218',
+                time2: '20230218',
+                number: '7',
+                tai: '已上线',
+                edit: 'caozuo'
+            }],
         }
     },
     watch: {
@@ -95,16 +105,94 @@ export default {
         }
     },
     created() {
-        this.getnotice()
+
     },
     methods: {
         goback() {
             window.history.go(-1)
         },
-        //tag点击
-        handleClick(tab, event) {
-            console.log(tab, event);
-        }
+        //点击标签切换修改后
+        onSale1() {
+            console.log("11")
+            if (this.btnact == 'activeBack') {
+                this.btnact = 'th'
+                this.btnact1 = 'activeBack1'
+                this.btnact2 = 'activeBack2'
+            }
+            else {
+                this.btnact = 'activeBack'
+                this.btnact1 = 'th1'
+                this.btnact2 = 'th2'
+            }
+            this.tableData = [{
+                id: '17',
+                name: 'wangxiu',
+                time: '20230218',
+                time2: '20230218',
+                number: '7',
+                tai: '已上线',
+                edit: 'caozuo'
+            }]
+
+
+
+        },
+        preSale() {
+            console.log('222')
+            if (this.btnact1 == 'activeBack1') {
+                this.btnact1 = 'th1'
+                this.btnact = 'activeBack'
+                this.btnact2 = 'activeBack2'
+            }
+            else {
+                this.btnact1 = 'activeBack1'
+                this.btnact = 'th'
+                this.btnact2 = 'th2'
+            }
+            this.tableData = [{
+                id: '17',
+                name: 'wangxiu 预售',
+                time: '20230218',
+                time2: '20230218',
+                number: '7',
+                tai: '已上线',
+                edit: 'caozuo'
+            }]
+        },
+        expired() {
+            console.log('333')
+            if (this.btnact2 == 'activeBack2') {
+                this.btnact2 = 'th2'
+                this.btnact = 'activeBack'
+                this.btnact1 = 'activeBack1'
+            }
+            else {
+                this.btnact2 = 'activeBack'
+                this.btnact = 'th'
+                this.btnact1 = 'th1'
+            }
+            this.tableData = [{
+                id: '17',
+                name: 'wangxiu77777',
+                time: '20230218',
+                time2: '20230218',
+                number: '7',
+                tai: '已上线',
+                edit: 'caozuo'
+            }]
+        },
+        //重置
+        empty() {
+
+        },
+        //搜索
+        check() {
+
+        },
+        addSet() {
+
+        },
+
     }
 };
 
@@ -165,4 +253,58 @@ export default {
     margin: 20px auto;
     width: 97%;
 }
+
+.th {
+    /* margin: 0;
+    padding: 0; */
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #FFFFFF;
+    color: #606266;
+}
+
+.activeBack {
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #409EFF;
+    color: white;
+}
+
+.th1 {
+    /* margin: 0;
+    padding: 0; */
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #FFFFFF;
+    color: #606266;
+}
+
+.activeBack1 {
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #409EFF;
+    color: white;
+}
+
+.th2 {
+    /* margin: 0;
+    padding: 0; */
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #FFFFFF;
+    color: #606266;
+}
+
+.activeBack2 {
+    margin-right: -10.75px;
+    font-size: 16px;
+    font-weight: 800;
+    background-color: #409EFF;
+    color: white;
+}
 </style>