添加动态页面和富文本，添加依赖，npm install vue-quill-editor --save

src/views/modules/case/typicalcase-add-or-update.vue

@@ -29,29 +29,30 @@
     </el-form>
 
 <!--            实际案例-->
- <div name="caselist">
+ <div v-for="(item, index) in dataForm1.dynamicItem" :key="index">
-     <div style="text-align: left">{{"案例1"}}</div>
+     <div style="text-align: left">{{"案例"+dataForm1.number}}</div>
-    <el-form :model="dataForm1" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+    <el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-        <el-form-item label="案例来源">
+        <el-form-item label="案例来源" style="width: 40rem;">
             <el-cascader v-model="ids"
                          :options="options"
                          :props="{ checkStrictly: true }"
                          clearable>
             </el-cascader>
         </el-form-item>
-        <el-form-item label="关联案例">
+        <el-form-item label="关联案例" style="width: 40rem;">
-            <el-cascader v-model="caseid"
+            <el-input v-model="dataForm1.caseid" placeholder="" disabled></el-input>
-                         :options="options"
-                         :props="{ checkStrictly: true }"
-                         clearable>
-            </el-cascader>
             <el-button>{{"选择案例"}}</el-button>
         </el-form-item>
-        <el-form-item label="内容描述">
+        <el-form-item label="内容描述" style="width: 40rem;">
-            <el-input v-model="introduce" style="width: 40rem;" type="textarea" :rows="5"></el-input>
+            <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption"></quill-editor>
         </el-form-item>
     </el-form>
  </div>
+            <el-form>
+                <el-form-item>
+                    <el-button @click="addItem">{{"添加案例"}}</el-button>
+                </el-form-item>
+            </el-form>
 <!--            发布按钮-->
     <el-form>
         <template slot="footer">
@@ -65,11 +66,24 @@
 
 <script>
 import debounce from 'lodash/debounce'
+// eslint-disable-next-line no-unused-vars
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
 export default {
+  created () {
+    this.addItem()
+  },
+  components: {
+    quillEditor
+  },
   data () {
     return {
       fileList: [],
       visible: false,
+      content: '',
+      editorOption: {},
       dataForm: {
         id: '',
         caseTitle: '',
@@ -83,6 +97,13 @@ export default {
         createdTime: '',
         updatedBy: '',
         updatedTime: ''
+      },
+      dataForm1: {
+        number: 0,
+        ids: '',
+        caseid: '',
+        content: '',
+        dynamicItem: []
       }
     }
   },
@@ -156,6 +177,18 @@ export default {
       }
       this.file1 = file
     },
+    // 动态添加
+    addItem () {
+      let num = this.dataForm1.number
+      num = num + 1
+      this.dataForm1.number = num
+      this.dataForm1.dynamicItem.push({
+        number: this.dataForm1.number,
+        ids: '',
+        caseid: '',
+        content: ''
+      })
+    },
 
     init () {
       this.visible = true