表单管理-图片菜单

src/router/index.js

@@ -81,6 +81,21 @@ export const constantRoutes = [
       meta: { title: '修改密码', icon: 'dashboard' }
     }]
   },
+  {
+    path: '/formManage',
+    component: Layout,
+    name: 'formManage',
+    redirect: '/formManage/imgForm',
+    meta: { title: '表单管理', icon: 'dashboard' },
+    showFather: 'true',
+    children: [{
+      path: '/formManage/imgForm',
+      name: 'imgForm',
+      component: () => import('@/views/formManage/imgForm'),
+      meta: { title: '图片菜单', icon: 'dashboard' }
+    }
+    ]
+  },
   {
     path: '/onlyOffice',
     component: (resolve) => require(['@/views/onlyOffice.vue'], resolve),

src/views/formManage/imgForm.vue

+<template>
+  <div class="imgForm_module">
+    <el-table border :data="dataList">
+      <el-table-column type="index" label="序号" width="60px" align="center" />
+      <el-table-column label="图片" prop="url" :show-overflow-tooltip="true" width="150px">
+        <template slot-scope="scope">
+          <div :id="step(scope.$index)">
+            <el-image
+              style="width:100%;height:100%;"
+              :src="scope.row.url"
+              :preview-src-list="[scope.row.url]"
+              @click="handleClickStop(scope.$index)"
+            >
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline" />
+              </div>
+            </el-image>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="名称" prop="name" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.name || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="年龄" prop="age" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.age || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" prop="sex" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.sex || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="education" prop="education" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.education || '-' }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImgForm',
+  data() {
+    return {
+      dataList: [
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' },
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' },
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' },
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' },
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' },
+        { url: require('@/assets/image/profile.jpg'), name: '张三', sex: '男', age: '18', education: '大专' }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    /** 列表图片唯一标识*/
+    step(index) {
+      return 'step' + index
+    },
+    /** 点击蒙版关闭预览图片*/
+    handleClickStop(imageId) {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector(`#${this.step(imageId)} .el-image-viewer__mask`)
+        if (!domImageView) {
+          return
+        }
+        var closeButton = document.querySelector(`#${this.step(imageId)} .el-image-viewer__close`)
+        domImageView.addEventListener('click', () => {
+          closeButton.click()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.imgForm_module{
+
+}
+</style>