diantou/src_custom/_form-designer/component-library/xm-cascader.vue

<template>
  <a-form-model-item label="默认值">
    <xm-cascadeer-com
      v-model="component.attr.defaultValue"
      :field-names="{ label: 'name', value: 'name', children: 'children' }"
      :options="areaData"
      :placeholder="placeholder"
    />
  </a-form-model-item>
</template>

<script>
import { Cascader } from 'ant-design-vue'
import components from './_import-components/xm-cascader-import'
const fieldNames = { label: 'name', value: 'name', children: 'children' }
export const metaInfo = {
  caption: '省市区',
  component: {
    props: ['designerData'],
    data() {
      return {}
    },
    render() {
      const val = this.designerData.attr.defaultValue
        ? this.designerData.attr.defaultValue.split(',')
        : []
      import('./areadata').then((res) => {
        this.areaData = res.default
      })
      return (
        <Cascader
          value={val}
          fieldNames={fieldNames}
          placeholder='请选择地址'
          options={this.areaData}
        />
      )
    },
  },
  icon: 'environment',
  order: 700,
}

export const fieldProps = {
  dataType: 'string',
}
export default {
  name: 'XmCascader',
  metaInfo: {
    title: 'XmCascader',
  },
  components: {
    ...components,
  },
  data() {
    return {
      areaData: [],
      placeholder: '请选择地址',
    }
  },
  created() {
    import('./areadata').then((areadata) => {
      this.areaData = areadata
    })
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>