el-tabs遍历数据展示对应内容

el-tabs遍历数据动态展示对应内容（以及vue其他实用方法）

1.效果：

代码如下

 <el-tabs v-model="tabActiveName">
                  <el-tab-pane
                    v-for="(item, index) in tabApplicationList"
                    :key="index"
                    :label="item.name"
                    :name="item.id"
                    lazy
                  > </el-tabs>
  
  //methods里面的  tabApplicationList tabActiveName自定义
  chooseApplyChange(val) {
      this.$axios
        .get('url' + val)
        .then((res) => {
          this.tabApplicationList = res.data.data
          this.tabActiveName = this.tabApplicationList[0].id
        })
    },

实现效果，点击某项出现某一项的数据

2.在tab选项中填充内容

点击保存，实现效果：

点击不同的选项卡展示不同i的效果 for遍历

 <el-tabs v-model="tabActiveName">
                  <el-tab-pane
                    v-for="(item, index) in tabApplicationList"
                    :key="index"
                    :label="item.name"
                    :name="item.subassemblyDetailId"
                    lazy
                  >
                    <h5>伸缩规则</h5>
                    <template v-for="(item2, index2) in flexibleArray">
                      <el-row
                        :gutter="20"
                        style="margin-top: 20px"
                        :key="index2"
                        v-if="item2.subassemblyDetailId ==item.subassemblyDetailId "
                      >
                        <el-col :span="9">内存&nbsp;&nbsp;&nbsp;&nbsp;{{item2.memory|filterOne}}</el-col>
                        <el-col
                          :span="15"
                        >实例数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item2.instancesNumber}}</el-col>
                      </el-row>
                    </template>
                  </el-tab-pane>
                </el-tabs>

删除list中的某项数据：

是定义的数组

this.flexibleArray.splice(
        this.flexibleArray.findIndex(
          (e) => e.id === this.id
        ),
        1
)

设置动态表格表头颜色： :header-cell-style="{background:’#eef1f6’,color:’#606266’}"

效果：