<script setup lang="ts">
import { getAreaList } from '@/api/area'

const city = ref('')
const city2 = ref('')

const getList = async () => {
  const result: any = await getAreaList()
  const list = result.find((item: any) => item.id === '140000').children
  return Promise.resolve(list)
}

const getList2 = async () => {
  const result: any = await getAreaList()
  const list = result
    .find((item: any) => item.id === '140000')
    .children.find((item: any) => item.id === '140100').children
  return Promise.resolve(list)
}
</script>

<template>
  <el-card header="自定义数据" shadow="never">
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item label="山西省：" prop="">
          <el-area v-model="city" class="w-200px" tag-type="success" :request="getList"></el-area>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="太原市：" prop="">
          <el-area v-model="city2" class="w-200px" tag-type="success" :request="getList2"></el-area>
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss"></style>
