写一个简单的 Vue 页面,实现选择框选中时,下拉选择框禁用的功能

实现的具体功能如下图所示,当选择框没有选中时,下拉框可以选择相应的值,当选择选中时,下拉框无法选择

              

具体代码实现如下

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        disabled: false,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods: {
     selectAll () {
      this.disabled = !this.disabled
     }
  }
</script>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,那么这里提供一种基于Vue实现省市区三级联动的方法。 首先,我们需要准备好三个下拉,分别是省、市、区,同时需要一个存放省市区数据的数组。我们可以在Vue实例中定义一个data属性来存储这些数据。 然后,我们需要在页面加载时,通过Ajax请求获取省市区数据,并将数据存储到Vue实例的data属性中。 最后,我们需要监听省、市的选择事件,根据选择的省、市来筛选出对应的区数据,并将其展示在区的下拉中。 下面是一个简单的示例代码: ``` <template> <div> <select v-model="selectedProvince" @change="provinceChange"> <option v-for="province in provinces" :value="province.id">{{province.name}}</option> </select> <select v-model="selectedCity" @change="cityChange"> <option v-for="city in cities" :value="city.id">{{city.name}}</option> </select> <select v-model="selectedDistrict"> <option v-for="district in districts" :value="district.id">{{district.name}}</option> </select> </div> </template> <script> export default { data() { return { provinces: [], // 省份数据 cities: [], // 城市数据 districts: [], // 区域数据 selectedProvince: '', // 当前选中的省份id selectedCity: '', // 当前选中的城市id selectedDistrict: '', // 当前选中的区域id } }, mounted() { // 页面加载时请求省市区数据 this.loadProvinces(); }, methods: { // 加载省份数据 loadProvinces() { // 发送Ajax请求获取省份数据 axios.get('/api/provinces').then(response => { this.provinces = response.data; }).catch(error => { console.log(error); }); }, // 加载城市数据 loadCities(provinceId) { // 发送Ajax请求获取城市数据 axios.get('/api/cities?provinceId=' + provinceId).then(response => { this.cities = response.data; }).catch(error => { console.log(error); }); }, // 加载区域数据 loadDistricts(cityId) { // 发送Ajax请求获取区域数据 axios.get('/api/districts?cityId=' + cityId).then(response => { this.districts = response.data; }).catch(error => { console.log(error); }); }, // 省份选择事件 provinceChange() { // 重置城市和区域的选择 this.selectedCity = ''; this.selectedDistrict = ''; // 加载选中省份的城市数据 this.loadCities(this.selectedProvince); }, // 城市选择事件 cityChange() { // 重置区域的选择 this.selectedDistrict = ''; // 加载选中城市的区域数据 this.loadDistricts(this.selectedCity); } } } </script> ``` 在这个示例中,我们使用了axios库来发送Ajax请求获取省市区数据。对于省份选择事件和城市选择事件,我们都需要重置下一级选择的值,并根据当前选择的省、市来加载对应的城市、区域数据。 当然,具体的数据结构和请求方式需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值