manager 升级到vue3

manager/src/components/lili-dialog/template/special.vue

@@ -3,26 +3,31 @@
     <div class="content">
       <div>
         <div class="tables">
-          <Table
-           border
-            height="350"
-            tooltip
-            :loading="loading"
-            :columns="columns"
-            :data="data"
-          >
-          </Table>
+          <el-table v-loading="loading" border height="350" :data="data" style="width: 100%">
+            <el-table-column prop="name" label="专题名称" show-overflow-tooltip />
+            <el-table-column label="操作" width="100" fixed="right" align="center">
+              <template #default="{ row, $index }">
+                <el-button
+                  v-if="row"
+                  :type="index === $index ? 'primary' : 'default'"
+                  size="small"
+                  @click="selectRow(row, $index)"
+                >
+                  {{ index === $index ? "已选" : "选择" }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
 
-          <Page
-
-            @on-change="changePageNum"
-            @on-page-size-change="changePageSize"
-            :current="params.pageNumber"
-            :page-size="params.pageSize"
+          <el-pagination
+            v-model:current-page="params.pageNumber"
+            v-model:page-size="params.pageSize"
             class="mt_10"
             :total="Number(total)"
+            layout="prev, pager, next, jumper"
             size="small"
-            show-elevator
+            @current-change="changePageNum"
+            @size-change="changePageSize"
           />
         </div>
       </div>
@@ -30,16 +35,13 @@
   </div>
 </template>
 <script>
-import { getHomeList }  from "@/api/other.js";
+import { getHomeList } from "@/api/other.js";
 export default {
   data() {
     return {
-      loading: true, //表格请求数据为true
-      promotionList: "", // 活动列表
-      selectedIndex: 0, //左侧菜单选择
-      promotions: "", //选中的活动key
-      index: 999, // 已选下标
-      data:[],
+      loading: true,
+      index: 999,
+      data: [],
       params: {
         sort: "createTime",
         order: "desc",
@@ -48,68 +50,34 @@ export default {
         pageSize: 20,
         pageType: "SPECIAL",
       },
-      total: 0, // 表单数据总数
-      columns: [
-        {
-          title: "专题名称",
-          key: "name",
-          tooltip: true,
-          // slot: 'name'
-        //   width: 200,
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "Button",
-                {
-                  props: {
-                    type: this.index == params.index ? "primary" : "default",
-                    size: "small",
-                  },
-                  on: {
-                    click: () => {
-                      this.index = params.index;
-                      params.row = {...params.row,pageType:'special',___type:'special'}
-                      this.$emit("selected", [params.row]);
-                    },
-                  },
-                },
-                this.index == params.index ? "已选" : "选择"
-              ),
-            ]);
-          },
-        },
-      ],
+      total: 0,
     };
   },
   mounted() {
     this.init();
   },
-
   methods: {
-    changePageNum (val) { // 修改评论页码
+    selectRow(row, idx) {
+      this.index = idx;
+      const payload = { ...row, pageType: "special", ___type: "special" };
+      this.$emit("selected", [payload]);
+    },
+    changePageNum(val) {
       this.params.pageNumber = val;
       this.init();
     },
-    changePageSize (val) { // 修改评论页数
+    changePageSize(val) {
       this.params.pageNumber = 1;
       this.params.pageSize = val;
       this.init();
     },
-    // 获取话题的标题
     async init() {
-      // 根据当前路径判断当前是H5还是PC
-      this.params.pageClientType = this.$route.name === 'renovation' ? 'PC' : 'H5'
-      let res = await getHomeList(this.params);
+      this.params.pageClientType = this.$route.name === "renovation" ? "PC" : "H5";
+      const res = await getHomeList(this.params);
       if (res.success) {
         this.loading = false;
-        this.data= res.result.records
-        this.total = res.result.total
+        this.data = res.result.records;
+        this.total = res.result.total;
       } else {
         this.loading = false;
       }
@@ -128,49 +96,17 @@ img {
   margin-top: 2vh;
   text-align: right;
 }
-.time {
-  font-size: 12px;
-}
 .tables {
   height: 400px;
   margin-top: 20px;
   overflow: auto;
   width: 100%;
 }
-::v-deep .ivu-table-wrapper {
-  width: 100%;
-}
-.list {
-  margin: 0 1.5%;
-  height: 400px;
-  overflow: auto;
-  > .list-item {
-    padding: 10px;
-    transition: 0.35s;
-    cursor: pointer;
-  }
-  .list-item:hover {
-    background: #ededed;
-  }
-}
-.list {
-  flex: 1;
-  width: auto;
-}
 .content {
   overflow: hidden;
   flex: 4;
 }
-.active {
-  background: #ededed;
-}
 .wrapper {
   overflow: hidden;
 }
-.search-views {
-  display: flex;
-  > * {
-    margin: 0 4px;
-  }
-}
 </style>