(laravel+vue+element-ui)编辑页面时 select 选择器的基础多选

我们会在日常的开发中遇到使用element- ui 的下拉菜单选项,如果是多选的话,创建的时候我们还很容易获取值,只是在编辑的时候需要把之前的值赋上,本人已经就遇到了一个坑,值已经从数据库中查询出来了,只不过一直赋值不对,页面一直展示的是它的value值,而我需要的label值

    this.form.tag_id = data.tag_id.split('|');

我是用js的split将后台传递过来的数据进行分割成数组   JavaScript split() 方法

紧接着页面就展示成了这种效果


这就是我的那个错误效果


后来我搜索半天才恍然大悟,发现自己的获值是字符串类型


人家element-ui要求的是int类型的,所以我的一直出不来

最后我百度搜索了一下如何将字符串数组改为整型数组,有两种方法,不过我采用了第二种

this.form.tag_id = data.tag_id.split('|');

var tagsArr = data.tag_id.split('|');

tagsArr.forEach((item, index) => { tagsArr[index] = parseInt(tagsArr[index]);});

this.form.tag_id = tagsArr;

console.log(this.form.tag_id )

效果还是很棒的呢


效果就是出来了呢


记住一定得是int类型奥

好了,今天的分享就到这里了,望大家多多提提意见奥!!!

你可能感兴趣的:((laravel+vue+element-ui)编辑页面时 select 选择器的基础多选)