ant design vue中select数据回显问题10bet:

来源:http://www.chinese-glasses.com 作者:Web前端 人气:68 发布时间:2020-04-15
摘要:时间: 2019-09-26阅读: 1102标签: ant 1.当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中。 今早在对form使用setFieldsValue赋值时,select框中只显

时间: 2019-09-26阅读: 1102标签: ant

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中。

今早在对form使用setFieldsValue赋值时,select框中只显示了我赋的value值,没有跟option匹配,不显示lable

  1. 如何获取每次输入的内容,当keyup的时候触发函数。
    问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 )
    3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得)
  2. 如何匹配?(解决)
    4.1 如何获得所有option中的内容?(解决)

查文档,用了lableInValue也无果(大概本前端萌新不会用吧QAQ)

复制代码 代码如下:

表单元素select如下

function getSelectText()
{
//获得所有select标签
var object = document.getElementsByTagName('select');
//因为该html中只有一个select标签,所以就是name = "aabb"代表的标签
var obj = object[0];
//alert(obj.length);
//alert(obj[0]);
//保存所有option 的值
var allText;
for(i=0;i<obj.length;i++)
{
allText += obj[i].innerText+','; //关键是通过option对象的innerText属性获取到选项文本
}
return allText;
}

a-form-item label="数据类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" a-select v-decorator="['valueType',{rules: [{ required: true, message: '请选择类型' }]}]" a-select-option value="1"字符/a-select-option a-select-option value="2"数值/a-select-option /a-select/a-form-item

4.2 js分割字符串?(解决)

解决方案:

复制代码 代码如下:

在赋值时转为字符串类型,应该是数字类型与option的value值不匹配导致,转为字符串类型后完美解决

var allText = getSelectText();
//alert(allText);
// 每个option的内容分割开来
var eachOptin = new Array();
eachOptin=allText.split(","); //字符分割

this.dictDataForm.setFieldsValue({ 'dictCode': row.dictCode, 'dictVal': row.dictVal, 'dictText': row.dictText, 'valueType': row.valueType + '' // 转字符串,否则无法匹配value回显})

4.3 如何在js中匹配?

复制代码 代码如下:

本文由10bet发布于Web前端,转载请注明出处:ant design vue中select数据回显问题10bet:

关键词:

最火资讯