school qrcode

package.json

@@ -14,6 +14,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": "^1.0.2",
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
     "bootstrap": "^4.6.0",

src/modules/basic/view/school.vue

@@ -240,6 +240,23 @@
             >
               <i class="el-icon-edit"></i> 编辑
             </el-button>
+            &nbsp;
+            <el-popover
+              placement="left"
+              width="200"
+              trigger="hover"
+              :v-model="false"
+            >
+              <div style="margin: 0">
+                <qrcode
+                  :value="qrcodeContent(scope.row)"
+                  :options="{ width: 180 }"
+                ></qrcode>
+              </div>
+              <el-button slot="reference" size="mini" type="primary" plain
+                ><i class="el-icon-view"></i> 二维码</el-button
+              >
+            </el-popover>
           </div>
         </el-table-column>
       </el-table>
@@ -260,10 +277,14 @@
 
 <script>
 import { CORE_API } from "@/constants/constants.js";
+import VueQrcode from "@chenfengyuan/vue-qrcode";
 import { mapState } from "vuex";
 
 export default {
   name: "School",
+  components: {
+    qrcode: VueQrcode,
+  },
   data() {
     return {
       formSearch: {
@@ -514,6 +535,9 @@ export default {
 
       this.schoolDialog = true;
     },
+    qrcodeContent(row) {
+      return row.id + "@" + row.name;
+    },
   },
 };
 </script>