element tabs标签页使用注意点

<template>
	<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="普通用户" name="user">
			<user-list :set-search="userFrom" />
		</el-tab-pane>
		<el-tab-pane label="会员用户" name="member">
			<user-list :set-search="memberFrom" />
		</el-tab-pane>
	</el-tabs>
</template>
<script>
 export default {
   data() {
     return {
       activeName: 'user'
     }
   },
}
</script>

注意：user-list为对应的子组件
上述这种写法没有问题
。
。
。
但是
。
。
。
当 el-tab-pane 使用循环遍历出来时，问题来了

<template>
	<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		<el-tab-pane
            v-for="(item, index) in userTypeInfo"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
			<user-list :set-search="item.setSearch" />
		</el-tab-pane>
	</el-tabs>
</template>
<script>
 export default {
   data() {
     return {
       activeName: 'user',
       userTypeInfo: [
        {
          label: '普通用户',
          name: 'user',
          setSearch: {}
        },
        {
          label: '会员用户',
          name: 'member',
          setSearch: {}
        },
      ]
     }
   },
}
</script>

发送了多次重复请求。。。
怎么解决呢？加判断

<template>
	<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		<el-tab-pane
            v-for="(item, index) in userTypeInfo"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
           <!-- 注意：判断加在这里了 -->
			<user-list v-if="activeName === item.name" :set-search="item.setSearch" />
		</el-tab-pane>
	</el-tabs>
</template>
<script>
 export default {
   data() {
     return {
       activeName: 'user',
       userTypeInfo: [
        {
          label: '普通用户',
          name: 'user',
          setSearch: {}
        },
        {
          label: '会员用户',
          name: 'member',
          setSearch: {}
        },
      ]
     }
   },
}
</script>

完美！！！
注意：给子组件传递的数据值item.setSearch，如果需要动态赋值，默认第一个初始值的赋值需要写在created()里面（不能写在mounted()里面，否则会造成发送两次请求，第一次发送的请求数据是空数据的问题）