stateFormat

.env.development

@@ -22,4 +22,4 @@ VUE_APP_BASE_API = 'http://103.150.181.107:8080/'
 
 # # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
-# >>>>>>> 63f2f84b02ec59a1c8d2dea6bd07de6a1692dc33
+

src/views/message/messageList.vue

@@ -5,8 +5,8 @@
         <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
         <div class="btn">
           <el-button plain>重置</el-button>
-          <el-button type="primary" plain>查询列表</el-button> 
-        </div>       
+          <el-button type="primary" plain>查询列表</el-button>
+        </div>
       </div>
       <div class="left-up">
         <div class="up-input-title">
@@ -31,19 +31,21 @@
         <el-table :data="tableData" border style="width: 100%" class="messagetable">
           <el-table-column prop="id" label="ID">
           </el-table-column>
-          <el-table-column prop="messageTitle" label="消息标题">
+          <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题">
           </el-table-column>
           <el-table-column prop="phoneNumber" label="手机号">
           </el-table-column>
           <el-table-column prop="publishTime" label="发布时间">
           </el-table-column>
           <el-table-column prop="operate" label="操作">
+            <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
           </el-table-column>
         </el-table>
       </div>
     </div>
     <div class="bottom">
-      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
+      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div>
       <span class="bottom-number">共{{ 0 }}条 </span>
     </div>
   </div>
@@ -84,6 +86,13 @@ export default {
     },
     getTableList() {
       this.tableData = this.mockMessageList.list
+    },
+    stateFormat(row, column, cellValue) {
+      if (!cellValue) return ''
+      if (cellValue.length > 10) {       //最长固定显示10个字符
+        return cellValue.slice(0, 15) + '...'
+      }
+      return cellValue
     }
   }
 }
@@ -109,18 +118,20 @@ export default {
   margin-top: 20px;
   float: left;
 }
-.btn{
+
+.btn {
   float: right;
   padding-right: 3%;
   margin-top: 2.5%;
 }
+
 .up-input {
   width: 250px;
   margin-left: 15px;
 }
 
 .up-input-title {
-  
+
   margin-left: 40px;
 
   float: left;
@@ -134,7 +145,7 @@ export default {
 .up-input-title-right {
   width: 800px;
   margin-left: 450px;
-  
+
 
 }
 
@@ -198,9 +209,10 @@ export default {
   float: right;
 }
 
-.el-icon-search{ 
+.el-icon-search {
   padding-right: 10px;
 }
+
 /**
 自适应
 */