美文网首页
vue组件的el-tabs的el-tab-pane的name属性

vue组件的el-tabs的el-tab-pane的name属性

作者: 小呆糊总 | 来源:发表于2020-08-21 15:06 被阅读0次
    需求:页面的tabs选项通过后台获取,活动标签的label是文字,传给后台需要数字,不要字符串,但是el-tab-pane的 :name只接收string不接受int型,只要绑定就报错
    报错如下:
    image.png
    解决方法:
    1.在调用后台接口获取到的数据去遍历转成字符串
    2.让后端人员改变返回的类型,但是我们后端有点懒,半天没给我改,我就自己动手了
    <el-tabs @tab-click="handleClick" v-model="quoteWay" type="border-card" >
      <el-tab-pane v-for="item in wayList" :key="item.way" :label="item.wayName" :name="item.way">
      </el-tab-pane>
    </el-tabs>
    export default {
    created(){
        this.getWay()
    },
    methods: {
    getWay(){
       getWay().then(res=>{
           if(res.data.code == 200){
                 this.wayList = res.data.data
                 this.wayList.map(item=>{
                     // el-tab-pane的name只接受string类型不接受int型
                     item.way = item.way.toString()
                 }
            }
        })
    }
    }
    }
    

    相关文章

      网友评论

          本文标题:vue组件的el-tabs的el-tab-pane的name属性

          本文链接:https://www.haomeiwen.com/subject/ejvujktx.html