在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用

一开始看到van-picker的多列联动的例子时，脑子是懵逼的，我即将要用的数据不可能这么简单啊，这叫我咋用！

然后一顿苦思冥想，再深读文档内极其稀少的信息，最后在多次尝试后，终于把结果试出来了。没错，真的是试出来的。

心累。。。

show-toolbar

title="请选择小区名称"

:columns="columns"

value-key="name" //选项对象中，文字对应的 key

@confirm="onConfirm"

@cancel="onCancel"

@change="onChange"

var citys = [

{id:111,'name':'杭州'},

{id:222,'name':'宁波'},

{id:333,'name':'温州'},

{id:444,'name':'嘉兴'},

{id:555,'name':'湖州'},

];

var country = {

'杭州':[

{id:111,'name':'国杭州'},

{id:222,'name':'国宁波'},

{id:333,'name':'国温州'},

{id:444,'name':'国嘉兴'},

{id:555,'name':'国湖州'},

'宁波':[

{id:111,'name':'中杭州'},

{id:222,'name':'中宁波'},

{id:333,'name':'中温州'},

{id:444,'name':'中嘉兴'},

{id:555,'name':'中湖州'},

]

}

export default {

data() {

return {

columns:[

{

values: citys , //可以是数组，或者对象数组

className: 'column1' //选择器的第一列

{

values: country ['杭州'], //默认选中country对象中的第一项

className: 'column2', //选择器的第二列

}

methods: {

onChange(picker, values) {

//在change 第一列的时候，动态更改第二列的数据

//setColumnValues是vant自带的实例方法

//第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据

picker.setColumnValues(1, country [values[0].name]);

onConfirm(value) {

//将选中的文字和对应的id拿出来使用

this.village_name = value[0].name + ',' + value[1].name;

this.village_id = value[0].id;

this.garage_id = value[1].id;

}

在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用相关推荐

vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
vue 中watch函数名_vue中避免使用函数来绑定依赖
如果你正在使用vue编写业务,可能遇到一个数据比较多,他们都遵循相同的模式,需要在data里定义多个变量来绑定依赖,然后你不想在data里定义多个变量,在接口调回后每个都重新赋值,采用这种方式绑定依赖 ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中, ...
vue获取input的属性_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue打印props的值_vue中props传值方法
vue中props传值方法 1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助! ...

在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用

在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用相关推荐

最新文章

热门文章