美文网首页
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