企业公告-数据展示方式修改

src/views/dashboard/MyToDo.vue

@@ -178,7 +178,8 @@
       :switchFullscreen="modal.switchFullscreen"
     >
     
-    <dv-scroll-board class="board" :config="config" style="height:280px;" @click="getMethod" />
+    <!-- <dv-scroll-board class="board" :config="config" style="height:280px;" @click="getMethod" /> -->
+      <a-table :columns="columns" id="Notice" :dataSource="annList" style="height:280px;" :pagination ='false' :showHeader="false" :bordered="false"></a-table>
       <!-- <template v-for="(i,k) of 30">
         <p :key="k">这是主体内容，高度是自适应的</p>
       </template> -->
@@ -253,6 +254,29 @@ export default {
             switchFullscreen: true,
           },
       menuALL: [], //所有菜单
+      columns:[
+        {
+          title:'title',
+          align:"left",
+          ellipsis: true,
+          dataIndex: 'title',
+          width:600
+        },
+        {
+          title:'createBy',
+          align:"left",
+          ellipsis: true,
+          dataIndex: 'createBy',
+          width:300
+        },
+        {
+          title:'releaseTime',
+          align:"left",
+          ellipsis: true,
+          dataIndex: 'releaseTime',
+          width:400
+        },
+      ],
       // value: 0,
       annDetail: {}, //公告详情 数据
       annList: [], //公告列表 数据
@@ -498,24 +522,26 @@ export default {
           this.annList = res.result.records
           let scrollData = [] //轮播表数据
           // 拿到返回的数据进行遍历并渲染
-          this.annList.map(item => {
-            //企业公告类型
-            var annType = ''
-            if (item.type == '人事') {
-              annType =
-                '<span style="color:rgba(128, 0, 128,.3);border:1px solid rgba(128, 0, 128,.3);padding:0 4px;border-radius:3px;">人事</span>'
-            }
-            if (item.type == '财务') {
-              annType =
-                '<span style="color:rgba(19, 194, 197,.6);border:1px solid rgba(19, 194, 197,.6);padding:0 4px;border-radius:3px;">财务</span>'
-            }
-            if (item.type == '项目') {
-              annType =
-                '<span style="color:rgba(255, 165, 0,.8);border:1px solid rgba(255, 165, 0,.8);padding:0 4px;border-radius:3px;">项目</span>'
+          this.annList.map((item,index) => {
+            if(index<8){
+                //企业公告类型
+                var annType = ''
+                if (item.type == '人事') {
+                  annType =
+                    '<span style="color:rgba(128, 0, 128,.3);border:1px solid rgba(128, 0, 128,.3);padding:0 4px;border-radius:3px;">人事</span>'
+                }
+                if (item.type == '财务') {
+                  annType =
+                    '<span style="color:rgba(19, 194, 197,.6);border:1px solid rgba(19, 194, 197,.6);padding:0 4px;border-radius:3px;">财务</span>'
+                }
+                if (item.type == '项目') {
+                  annType =
+                    '<span style="color:rgba(255, 165, 0,.8);border:1px solid rgba(255, 165, 0,.8);padding:0 4px;border-radius:3px;">项目</span>'
+                }
+                var list = [item.id, item.title, item.createBy, item.releaseTime]
+
+                scrollData.push(list) //取到的每一个数据放到轮播表数据中
             }
-            var list = [item.id, item.title, item.createBy, item.releaseTime]
-
-            scrollData.push(list) //取到的每一个数据放到轮播表数据中
           })
           //轮播表配置
           this.config = {
@@ -711,7 +737,6 @@ export default {
 @import '~@assets/less/common.less';
 // 单独首页样式
 @import '~@assets/less/mytodo.less';
-
 .contain {
   position: absolute;
   left: 0;
@@ -724,5 +749,8 @@ export default {
 #home .secondLine .links .itemLink{
  background-color: #f5f5f5 !important ;
 }
-
+/deep/.ant-table-tbody .ant-table-row td {
+  padding: 8px 8px !important;
+  border-bottom:none !important;
+}
 </style>