意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

基于VUE框架如何制作自定义三级联动,过程是什么

来源:恒创科技 编辑:恒创科技编辑部
2024-01-20 16:42:59
这篇文章主要讲解了“基于VUE框架如何制作自定义三级联动,过程是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于VUE框架如何制作自定义三级联动,过程是什么”吧!


基于VUE框架如何制作自定义三级联动,过程是什么



picker选择器的数据由columns属性控制,columns中有几个元素就代表该选择器有多少级,通过change方法来给对应列赋值。

columns = [{
    values: column1, // 对应列的值
    defaultIndex: 0, // 默认选中项索引
    className: 'class1' // 对应列的类名 
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class2'
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class3'
  }
];

demo

<template>
<div class="form">
  <van-row type="flex" justify="center" align="center" style="padding-top:10px">
    <van-col span="5" class="text">自定义三级联动</van-col>
    <van-col span="19">
      <van-field v-model="student" placeholder="请选择" @click="stuShow = true" :readonly="true" />
    </van-col>
  </van-row>
  <!-- 底部弹出 -->
  <van-popup v-model="stuShow" position="bottom" :style="{ height: '40%' }">
    <van-picker :columns="stuLoad" @confirm="stuConfirm" @change="stuChange" @cancel="stuShow = false" show-toolbar />
  </van-popup>
</div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      student: '',
      stuShow: false,
      stuLoad: [],
      stuColumn1: [],
      stuColumn2: [],
      stuColumn3: []
    };
  },
  created() {
    this.makeData(); // 页面加载时给选择框赋初始值
  },
  methods: {
    makeData() { // 模拟数据,生产环境用axios获取数据
      let column1 = [{
        'kid': 0,
        'text': '请选择'
      }, {
        'kid': 1,
        'text': '一年级'
      }, {
        'kid': 2,
        'text': '二年级'
      }];
      let column2 = {
        '1': [{
          'kid': 1,
          'text': '一组'
        }, {
          'kid': 2,
          'text': '二组'
        }, {
          'kid': 3,
          'text': '三组'
        }],
        '2': [{
          'kid': 4,
          'text': '四组'
        }, {
          'kid': 5,
          'text': '五组'
        }]
      }
      let column3 = {
        '1': [{
          'kid': 1,
          'text': '小明'
        }, {
          'kid': 2,
          'text': '小红'
        }, {
          'kid': 3,
          'text': '小刚'
        }],
        '2': [{
          'kid': 4,
          'text': 'Amy'
        }, {
          'kid': 5,
          'text': 'Sam'
        }],
        '3': [{
          'kid': 4,
          'text': 'Sion'
        }, {
          'kid': 5,
          'text': 'Juno'
        }],
        '4': [{
          'kid': 6,
          'text': 'Lucy'
        }, {
          'kid': 7,
          'text': 'Tom'
        }],
        '5': [{
          'kid': 6,
          'text': 'Iwan'
        }]
      }
      let columns = [];
      columns = [{
          values: column1,
          defaultIndex: 0 //默认选中项索引
        },
        {
          values: [],
          defaultIndex: 0
        },
        {
          values: [],
          defaultIndex: 0
        }
      ];
      this.stuColumn2 = column2;
      this.stuColumn3 = column3;
      this.stuLoad = columns;
    },
    stuConfirm(value, index) { // 下方弹出层点击确认时触发
      // value为各列选中值
      // index为各列选中的索引
      if (index.indexOf(0) > -1) {
        alert('请选择');
      } else {
        let content = value[0]['text'] + ' / ' + value[1]['text'] + ' / ' + value[2]['text'];
        this.student = content;
        this.stuShow = false;
      }
    },
    stuChange(picker, value, index) { // 选择器改变时触发
      // Picker 实例
      // value为当前选中值
      // index为当前列对应的索引,第一列index为0,第二列index为1,依次列推
      if (index == 0) { // 改变第一列的值
        let i = value[0]['kid'];
        let item = this.stuColumn2[i] ? this.stuColumn2[i] : [];
        if (item && item[0]['text'] != '请选择') {
          item.unshift({
            'kid': 0,
            'text': '请选择'
          })
        }
        picker.setColumnValues(1, item); // 给对应的列赋值,第一个参数为列的index值,第二个参数为列的values
      } else if (index == 1) {
        let i = value[1]['kid'];
        let item = this.stuColumn3[i] ? this.stuColumn3[i] : [];
        if (item.length != 0 && item[0]['text'] != '请选择') {
          item.unshift({
            'kid': 0,
            'text': '请选择'
          })
        }
        picker.setColumnValues(2, item);
      }
    }
  }
};
</script>

<style scoped>
.text {
  text-align: right;
}
</style>

补充知识:vue vant-picker选择器的使用,及数据结构的写法

vant-picker组件columns属性接收的是一个数组,如官方例子中:

它的数组是子项是一个简单是字符,但通常我们真实的数据子项都是对象,如:

colums:[ {name:'张三',age:18},{name:'李四',age:28}]

那么像这样的数组该怎么显示呢, vant-picker的value-key属性就是解决这个问题的,如我要使用上面的数组,那么vant-picker

就是这样

另外,如果数组中的子项含有键名为'text',那么value-key也可以不用设置,组件会默认取这个键名,如colums:[ {text:'张三',age:18},{text:'李四',age:28}]


到此这篇关于“基于VUE框架如何制作自定义三级联动,过程是什么”的文章就介绍到这了,更多相关内容请搜索恒创科技以前的文章或继续浏览下面的相关文章,希望大家以后多多支持恒创科技!
上一篇: vantUI中如何实现获得piker选中值的ID 下一篇: 手机怎么远程登录云服务器?