在vue中实现picker样式_vue vant中picker组件的使用

1、引入

import { Picker } from "vant"

2、使用

components: {

vanPicker: Picker,

}

3、渲染

show-toolbar

:columns="columns"

value-key="text"

4、将值push到columns

//注意的点vant默认的是text，如果你需要修改需要value-key="你要定义的名字"，否则不会渲染

this.columns = [

{

siteState: 1,

text: "装机开业"

{

siteState: 2,

text: "装机停业"

{

siteState: 3,

text: "未装机开业"

{

siteState: 4,

text: "未装机停业"

{

siteState: 5,

text: "其他"

}

];

补充知识：vant-ui之Field输入框和Picker结合使用时，如何绑定正确的id类型的值的问题。

很常见的需求：

表单中的一项，需要从picker控件中选择正确的值后，展示的是字符串，然后提交到后台服务器的则是字符串对应的value类型的值的问题。

点击表单的档案组，弹出Picker选择组件，选择正确的值，填充到表单项，但是，提交到服务器去，需要提交对应的id，而不是看到的字符串。

如何实现？

实现方式一：

定义两个属性，classId和className，她两是一一对应的关系。

data() {

return {

classId: -1,

className: "全部",

columns: [

{ text: "全部", value: -1 },

{ text: "未分组", value: 0 },

{ text: "访客", value: 1 },

}

van-field中绑定className

readonly

clickable

name="picker"

:value="className"

label="档案组"

placeholder=""

@click="showClassPicker = true"

然后在van-picker中，绑定的confirm函数，参数获取到的是一个对象。

在这个函数内，同时更新className和classId，保证他俩一一对应。

show-toolbar

:columns="columns"

@confirm="onClassConfirm"

@cancel="showClassPicker = false"

onClassConfirm(v) {

this.classId = v.value;

this.className = v.text;

this.showClassPicker = false;

这样就可以了。用户在表单中看到的是字符串，而提交给后台的，则是与这个字符串一一对应的id值。

方式二：

van-field中依然还是使用value类型的值，只是需要给这个值，一个filter过滤器，转换为正确的字符串显示，但是提交给后台的，却是value类型的值，譬如id

以上这篇vue vant中picker组件的使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持云海天教程。

原文链接：https://blog.csdn.net/wangzongyang1025_/article/details/103784859

在vue中实现picker样式_vue vant中picker组件的使用相关推荐

vue按钮字体大小设置_vue项目中应用自定义的字体
1.下载ttf文件,保存到assets/css/font里面,在css下面新建font.css. 2.font.css内容:在这,有些ttf的格式可能不对,在项目中用不了,我一般去https://ww ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
vant在cell中加表格_在vant 中使用cell组件定义图标该图片和位置操作
@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件定义图标该图片和位置像微信信息栏一样二级经营单位 // ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用
一开始看到van-picker的多列联动的例子时,脑子是懵逼的,我即将要用的数据不可能这么简单啊,这叫我咋用! 然后一顿苦思冥想,再深读文档内极其稀少的信息,最后在多次尝试后,终于把结果试出来了.没错 ...
vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件.引用Vant UI 作为样式特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: 确认 v-model="l ...
vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...

在vue中实现picker样式_vue vant中picker组件的使用

在vue中实现picker样式_vue vant中picker组件的使用相关推荐

最新文章

热门文章