优化展示

src/components/feed/RecipeTable.vue

@@ -1,29 +1,29 @@
 <template>
   <el-table
-    :data="recipes" 
+      :data="recipes"
-    style="width: 100%"
+      style="width: 100%"
-    :fit="true"
+      :fit="true"
-    table-layout="auto"
+      table-layout="auto"
-    row-key="id"
+      row-key="id"
-    :highlight-current-row="false"
+      :highlight-current-row="false"
-    :scrollbar-always-on="true"
+      :scrollbar-always-on="true"
   >
-    <el-table-column prop="id" label="ID" width="80" />
+    <el-table-column prop="id" label="ID" width="80"/>
-    <el-table-column prop="name" label="配方名" min-width="150" />
+    <el-table-column prop="name" label="配方名" width="120"/>
-    <el-table-column label="原料种类数" width="180" align="center">
+    <el-table-column label="原料种类数" align="center" width="150">
       <template #default="scope">
         <span>{{ scope.row.recipe_ingredients ? scope.row.recipe_ingredients.length : 0 }} 种 </span>
         <el-button
-          type="primary"
+            type="primary"
-          link
+            link
-          @click="$emit('show-details', scope.row)"
+            @click="$emit('show-details', scope.row)"
-          style="padding: 0; vertical-align: baseline;"
+            style="padding: 0; vertical-align: baseline;"
         >
           [点击查看详情]
         </el-button>
       </template>
     </el-table-column>
-    <el-table-column prop="description" label="配方简介" min-width="200" />
+    <el-table-column prop="description" label="配方简介"/>
     <el-table-column label="操作" width="150" align="center">
       <template #default="scope">
         <el-button size="small" @click="$emit('edit', scope.row)">编辑</el-button>