el-tabs循环写法

在element ui 中的el-tabs-pane写法：

<template>
  <el-tabs 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>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

想将el-tabs-pane写成循环：

<template>
<!-- 对话框头-->
<el-dialog title="添加快捷键" :visible.sync="dialogVisible" width="65%" top="10vh">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in biaoqiantou" :key=' index' :label="item.name">{{item.name}}
            </el-tab-pane>
        </el-tabs>                                   
    </el-dialog>
</template>
<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            //dialog对话框显示设置
            dialogFormVisible: true,
            dialogTableVisible: false,
            activeName:'',
            biaoqiantou:[
                {id:1,name:"用户管理"},
                {id:2,name:"配置管理"},
                {id:3,name:"角色管理"},
                {id:4,name:"定时任务"},
            ],
        };
    },
    methods: {     
        handleClick(tab, event) {
        console.log(tab, event);
      }
    },
</script>

如果是调后端给的接口写法：

这里记得写个APP.js后端的请求接口在引入到vue文件中

import { biaoqiantouApi} from '@/api/app';

<template>
<el-dialog title="添加快捷键" :visible.sync="dialogVisible" width="65%" top="10vh">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in biaoqiantou" :key="'parent-tab-'+ index" :label="item.Name" :name="item.Id">
</el-tab-pane>
</el-tabs>                                   
</el-dialog>
</template>
<script>
//后端给的所有接口引入
import { biaoqiantouApi} from '@/api/app';
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            //dialog对话框显示设置
            dialogFormVisible: true,
            dialogTableVisible: false,
            activeName:'',
            biaoqiantou:[],
        };
    },
    methods: {     
        handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    created() {
        biaoqiantouApi().then(res => {
            this.biaoqiantou = res.data;
        });
    }
</script>