vue多选下拉框提交,页面渲染的是数字

VUE
多选下拉框选择数据提交后

img


页面渲染的是数字

img


我这个下拉框是数组,页面怎么转换成对应的文字呢

页面代码

img


img


img

用templete来自定义渲染的数据,不能再column中直接渲染了

因为你绑定的value是 id 所以 v-model的值就是 数字。你只能 拿到id后再和原来的数据 做个循环对比找到对应的文字。
你打印 orderItem就知道了。

let data = [ //原数据
        {
            painc: "333",
            id: 1
        },
        {
            painc: "444",
            id: 2
        },
        {
            painc: "555",
            id: 3
        }
    ];
    //v-model获取到的值 一般是 [1,2]
   
    console.log(getIdFromDataToPainc(data,[1,3]));

    function getIdFromDataToPainc(data, ids) { //函数作用 用id 获取到 对应的painc属性
        if (!data || !ids || data.length==0|| ids.length==0) {
            return
        }
        let arr=[];
        data.map((item)=>{
            ids.map((id)=>{
                if(item.id==id){
                   arr.push(item.painc);
                }
            })
        });
        return arr;
    }