JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Vue项目iview中tabs获取子元素id传值

2019. 10. 29    

Vue项目Iview中tabs获取子元素id传值

TabPane上的name属性会自动通过父组件上的方法传到方法里面

<template>
  <Tabs type="card" @on-click="getItem">
    <TabPane v-for="tab in tabs" :name='tab.id' :key="tab.id" :label="tab.nickname"></TabPane>
  </Tabs>
</template>
<script>
  export default {
    data(){
      return{
        tabs: [
          {
            id: "111111",
            nickname: "Bob"
          },
          {
            id: "222222",
            nickname: "Dear"
          },
          {
            id: "333333",
            nickname: "Job"
          }
        ],
      }
    },
    methods: {
      getItem(index) {
        console.log(index) //111111,222222,333333
      }
    }
  }
</script>