update

src/views/basic/carInfo.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
-        <el-select v-model="dataForm.paramKey" filterable placeholder="名称">
+        <!-- <el-select size="small" v-model="dataForm.paramKey" filterable placeholder="名称">
           <el-option
             v-for="item in dataList"
             :key="item.id"
@@ -10,16 +10,24 @@
             :value="item.vehicleName"
           >
           </el-option>
-        </el-select>
+        </el-select> -->
+        <el-input size="small" v-model="dataForm.paramKey" placeholder="名称" />
       </el-form-item>
       <el-form-item>
-        <el-button @click="getDataList()">查询</el-button>
-        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        <el-button size="small" @click="getDataList()">
+          <icon-svg class="iconClass" name="sousuo"></icon-svg>
+          查询
+        </el-button>
+        <el-button size="small" type="primary" @click="addOrUpdateHandle()">
+          <icon-svg class="iconClass" name="新建"></icon-svg>
+          新增
+        </el-button>
       </el-form-item>
     </el-form>
     <el-table
       :data="dataList"
-      border
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       v-loading="dataListLoading"
       style="width: 100%;">
       <el-table-column
@@ -37,32 +45,22 @@
       </el-table-column> -->
       <el-table-column
         prop="vehicleName"
-        header-align="center"
-        align="center"
         label="车辆名称">
       </el-table-column>
       <el-table-column
         prop="code"
-        header-align="center"
-        align="center"
         label="编码">
       </el-table-column>
       <el-table-column
         prop="vehicleAlias"
-        header-align="center"
-        align="center"
         label="缩写">
       </el-table-column>
       <el-table-column
         prop="ip"
-        header-align="center"
-        align="center"
         label="ip">
       </el-table-column>
       <el-table-column
         prop="note"
-        header-align="center"
-        align="center"
         label="备注">
       </el-table-column>
       <el-table-column
@@ -72,8 +70,16 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
+            <el-tooltip class="item" effect="dark" content="修改" placement="top">
+              <icon-svg class="iconClass" name="编辑"></icon-svg>
+            </el-tooltip>
+          </el-button>
+          <el-button type="text" style="color:red" size="small" @click="deleteHandle(scope.row.id)">
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <icon-svg class="iconClass" name="删除"></icon-svg>
+            </el-tooltip>
+          </el-button>
         </template>
       </el-table-column>
     </el-table>