[JavaScript知识库]vue+element-ui中的tabs组件，如何动态渲染数据

? ? ? ? vue中element-ui的tabs组件如何动态渲染数据呢？

? ? ? ? ?使用tabs组件自带tab-click事件，同时通过tabs的name渲染数据

   <template> 
     <div style="margin-top:20px;">
          <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </div>
   </template>

<script>
export default {
   data(){
     return{
     activeName: 'first', 
    }
   },
  // 点击切换状态
    async handleClick(tab, event) {
      console.log(tab, event)
      if (tab.name === 'first') {
        this.form.chkState = null
        const res = await choice(this.form)
        console.log('全部', res)
        this.list = res.data.items
        this.counts = res.data.counts
      } else if (tab.name === 'second') {
        this.form.chkState = 0
        const res = await choice(this.form)
        console.log('待审核', res)
        this.list = res.data.items
        this.counts = res.data.counts
      } else if (tab.name === 'third') {
        this.form.chkState = 1
        const res = await choice(this.form)
        console.log('已审核', res)
        this.list = res.data.items
        this.counts = res.data.counts
      } else if (tab.name === 'fourth') {
        this.form.chkState = 2
        const res = await choice(this.form)
        console.log('已拒绝', res)
        this.list = res.data.items
        this.counts = res.data.counts
      }
    },

  }
    
</script>