md

src/components/CityPicker/indexA.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-cascader
+    ref="cascader"
+    :props="casProps"
+    :options="casData"
+    filterable
+    clearable
+    placeholder="请选择"
+    @change="handleCasChange">
+  </el-cascader>
+</template>
+
+<script>
+export default {
+  name: 'cascaderTest',
+  data () {
+    return {
+    // 获取数据
+      casData: [],
+      casProps: {
+        value: 'casId',
+        label: 'casName',
+        // 懒加载
+        lazy: true, // 必须为true
+        lazyLoad:this.lazyLoad
+      }
+    }
+  },
+methods:{
+	// 懒加载获取数据
+    lazyLoad(node,resolve){
+        const level = node.level
+        var url
+        if (level === 0) {
+          url = '接口地址'
+        }
+        if (level === 1) {
+          url = '接口地址'
+        }
+        if (level === 2) {
+          url = '接口地址'
+        }
+        // 请求看项目具体请求格式
+        this.reqM1Service(url, '', "get")
+        .then(res => {
+          let data
+          if (level === 0) {
+            data = res.data.data
+            // 判断data是否有数据
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }else{
+                data.forEach(item => {
+                this.value = item.casId
+                this.label = item.casName
+            })
+           }
+          }
+          if (level === 1) {
+            data = res.data.data
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }
+            data.forEach(item => {
+              item.value = item.casId
+              item.label = item.casName
+            })
+          }
+          if (level === 2) {
+            data = res.data.data
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }
+            data.forEach(item => {
+              item.value = item.casId
+              item.label = item.casName
+              //将相关值赋值到选择器上
+              item.leaf = level >= 2
+            })
+          }
+          resolve(data)
+        })
+      }
+    }
+}
+</script>

src/components/CityPicker/indexD.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div>
+      <el-select v-model="form.province" placeholder="省" clearable filterable>
+        <el-option
+          v-for="item in provinceIdsOptions"
+          v-bind:key="item.value"
+          v-bind:label="item.label"
+          v-bind:value="item.value"
+        />
+       </el-select>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'CitePickerA',
+  data () {
+    return {
+      country:null,
+      province:null,
+      city:null,
+      district:null,
+      town:null,
+    }
+  },
+methods:{
+	// 懒加载获取数据
+    lazyLoad(node,resolve){
+        const level = node.level
+        var url
+        if (level === 0) {
+          url = '接口地址'
+        }
+        if (level === 1) {
+          url = '接口地址'
+        }
+        if (level === 2) {
+          url = '接口地址'
+        }
+        // 请求看项目具体请求格式
+        this.reqM1Service(url, '', "get")
+        .then(res => {
+          let data
+          if (level === 0) {
+            data = res.data.data
+            // 判断data是否有数据
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }else{
+                data.forEach(item => {
+                this.value = item.casId
+                this.label = item.casName
+            })
+           }
+          }
+          if (level === 1) {
+            data = res.data.data
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }
+            data.forEach(item => {
+              item.value = item.casId
+              item.label = item.casName
+            })
+          }
+          if (level === 2) {
+            data = res.data.data
+            if(data.length == 0){
+              return this.$message.error("获取数据失败！")
+              }
+            data.forEach(item => {
+              item.value = item.casId
+              item.label = item.casName
+              //将相关值赋值到选择器上
+              item.leaf = level >= 2
+            })
+          }
+          resolve(data)
+        })
+      }
+    }
+}
+</script>

src/components/FormPanel/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <div id="formPanel">
+      <slot></slot>
+      <el-col :span="24">
+             <el-divider content-position="right"   >更多信息[+]</el-divider>
+      </el-col>
+    </div>
+</template>
+<script>
+import { Form, FormItem, Button } from 'element-ui'
+export default {
+  name: 'FormPanel',
+  components: { Form, FormItem, Button },
+  props: {
+    // 最大展示数，默认3个，超过则隐藏，为0时不限制
+    maxShow: {
+      type: Number,
+      default: 3,
+    },
+    labelWidth: {
+      type: String,
+      default: '100px',
+    },
+    size: {
+      type: String,
+      default: 'small',
+    },
+  },
+  data() {
+    return {
+      collapsiable: false,
+      fold: false,
+    }
+  },
+  created() {},
+  mounted() {
+    // 通过最大显示个数控制展开/折叠
+    if (this.maxShow > 0) {
+      this.minShowCtrol()
+    }
+  },
+  methods: {
+    shiftCollapsiable() {
+      this.fold = !this.fold
+
+      this.minShowCtrol()
+    },
+    // 通过maxShow控制元素显示/折叠
+    minShowCtrol() {
+      const group = window.document.querySelectorAll(`#formPanel .el-form-item.el-form-item--${this.size}`)
+      const len = group?.length ? group?.length - 1 : 0
+      if (this.maxShow < len) {
+        group.forEach((item, index) => {
+          if (index > this.maxShow - 1 && index < len) {
+            if(!this.fold){
+              item.style.display = 'none';
+            }else{
+              item.style.display = '';
+            }
+            // item.hidden = !this.fold
+          }
+        })
+        this.collapsiable = true
+      } else {
+        this.collapsiable = false
+      }
+    },
+    handleQuery() {
+      this.$emit('search')
+    },
+    handleReset() {
+      this.$emit('reset')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>
+