农村合作社 图片上传列表展示

src/views/cooperative/index.vue

@@ -93,7 +93,11 @@
       <el-table-column label="负责人" align="center" prop="chargePeople" />
       <el-table-column label="负责人电话" align="center" prop="chargePhone" />
       <!--<el-table-column label="备注信息" align="center" prop="remark" />-->
-      <el-table-column label="图片" align="center" prop="imgUrl" />
+      <el-table-column label="图片" align="center" prop="imgUrl" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.imgUrl" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -138,7 +142,7 @@
           <el-input v-model="form.chargePhone" placeholder="请输入负责人电话" maxLength="20" />
         </el-form-item>
         <el-form-item label="图片" prop="imgUrl">
-          <el-input v-model="form.imgUrl" placeholder="请输入图片" />
+          <image-upload v-model="form.imgUrl" :fileSize="10" :limit="1" />
         </el-form-item>
         <!--<el-form-item label="备注信息" prop="remark" maxLength="500">-->
           <!--<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />-->
@@ -191,7 +195,13 @@ export default {
         imgUrl: null
       },
       // 表单参数
-      form: {},
+      form: {
+        name: null,
+        address: null,
+        chargePeople: null,
+        chargePhone: null,
+        imgUrl: null
+      },
       // 表单校验
       rules: {
         name: [