使用表格显示待办事项

src/views/home/index.vue

@@ -73,15 +73,18 @@
         <a href=""></a>
       </el-col>
       <ul class="homeMessageMain">
-        <li v-for="(item, index) in noticeList" :key="index">
-          <el-col class="MessageMainTit text-owt"> {{ item.name }} {{ item.content }} </el-col>
-          <el-col class="MessageMainDay text-owt">
-            <el-link type="primary" @click="handleDelete(item.id)">[不再提示]</el-link>
-          </el-col>
-        </li>
-        <li v-if="noticeList.length <= 0">
-          <el-col :span="24" style="text-align:center">暂无待办事项</el-col>
-        </li>
+        <el-table :data="noticeList" border :max-height="200">
+          <el-table-column width="800">
+            <template slot-scope="scoped">
+              {{ scoped.row.name }} {{ scoped.row.content }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center">
+            <template slot-scope="scoped">
+              <el-link type="primary" @click="handleDelete(scoped.row.id)">[不再提示]</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
       </ul>
     </el-row>
     <el-row class="homeRes">
@@ -160,7 +163,17 @@ export default {
       { message: '【在线招聘】您申请的在线招聘："fffffff，已通过审批', day: '2019-07-02 16:05' },
     ],
     info: {},
-    noticeList: [],
+    noticeList: [
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+      { name: '测试企业', content: '刚刚添加一条测试信息' },
+    ],
   }),
   created() {
     this.search();
@@ -241,6 +254,9 @@ export default {
 /deep/.el-dialog__body {
   padding: 0;
 }
+/deep/.has-gutter {
+  display: none;
+}
 .tit h4 {
   color: #333;
   font-size: 15px;