element组件cascader实现省市区三级联动

方正义

已于 2023-12-19 22:28:55 修改

阅读量433

点赞数

文章标签： javascript vue elementui

于 2023-06-16 15:06:40 首次发布

本文链接：https://blog.csdn.net/weixin_40499184/article/details/131247291

版权

html片段

    <div style="margin:20px">
      <el-cascader v-model="value" :options="oneList" @change="oneChange"></el-cascader>
      <el-cascader v-model="valuetwo" :options="twoList" @change="twoChange"></el-cascader>
      <el-cascader v-model="valuethree" :options="threeList"></el-cascader>
    </div>

script代码

<script>
 data() {
    return {
      // 一级的value
      value: [],
      valuetwo: [],
      valuethree: [],
      // 所有的省
      oneList: [],
      // 市
      twoList: [],
      threeList: [],
      // 一级省的id
      oneId: '',
      twoId: ''

    }
  },
  created() {
    this.getOneList()
  },
  methods: {
    async   getOneList() {
      const { data } = await areaList()
      this.oneList = data.map(item => ({ label: item.name, value: item.id }))
    },
    // 点一级获取二级
    async oneChange(val) {
      // val是回调里面的默认参数
      this.oneId = val[0]
      const { data } = await areaList({ parentId: this.oneId })
      this.twoList = data.map(item => ({ label: item.name, value: item.id }))
    },
    // 点二级获取三级
    async twoChange(val) {
      this.twoId = val[0]
      const { data } = await areaList({ parentId: this.twoId })
      this.threeList = data.map(item => ({ label: item.name, value: item.id }))
    }

  }

</script>