v-for的连续嵌套应用

#v-for的连续嵌套应用
每个v-for都需要有一个：key绑定，：key可以合在一起

<template>
  <div class="customTableZXL">
    <h1>自定义列表</h1>
    <el-table
      :data="tableData"
      :height="tableHight"
      max-height="300"
      row-key="rowKey"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      >
      <el-table-column type="expand" fixed>
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item v-if="props.row.hiddenShort">
              <span>需要隐藏的短列:{{ props.row.hiddenShort }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.hidden">
              <span>需要隐藏的列:{{ props.row.hidden }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" fixed></el-table-column>
      <template v-for="item in tableTitle">
        <template v-for="inde in tableData"
          ><el-table-column
            :key="inde.rowKey + item.id"
            :label="item.label"
            :width="item.width"
            :fixed="item.isFixed"
            :sortable="item.isSortable"
          >
            {{ index }}
            <!-- <template slot-scope="scope">
            <template v-if="scope.row.processTitle">{{
              scope.row.processTitle
            }}</template>
            <template v-else></template>
          </template> -->
          </el-table-column></template
        >
      </template>
      <el-table-column label="操作" fixed="right" width="200"
        ><template slot-scope="scope">
          <el-button type="text" @click="customBtn(scope)">按钮</el-button>
          <el-button type="text" @click="customBtn(scope)">按钮</el-button>
          <el-button type="text" @click="customBtn(scope)">按钮</el-button>
          <el-button type="text" @click="customBtn(scope)">更多</el-button>
        </template></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableTitle: { type: Array, default: () => {} },
    tableData: { type: Array, default: () => {} },
    tableHight: { type: String },
  },
  created() {},
  mounted() {},
  data() {
    return {
      tableTitleWidth: this.tableTitle[3],
    };
  },
  methods: {
    customBtn(scope) {
      console.log("scope:", scope);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.customTableZXL ::v-deep {
  .el-table {
    // 滚动部分样式
    .el-table__body-wrapper {
      // overflow-x: auto;
      .el-table__body {
        tbody {
          tr {
            &:not(.el-table__row) {
              // background-color: white;
              // color: white;
              .el-table__cell {
                &.el-table__expanded-cell {
                  // background-color: blue;
                  &:hover {
                    // background-color: blue !important;
                  }
                  .el-form {
                    .el-form-item {
                      margin-right: 0;
                      margin-bottom: 0;
                      .el-form-item__label {
                      }
                      .el-form-item__content {
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .el-table__row {
          td {
            .cell {
              white-space: nowrap;
            }
          }
        }
      }
    }
    // 左侧固定部分样式
    .el-table__fixed {
      // overflow: visible;
      // overflow-x: visible;
      .el-table__fixed-header-wrapper {
        .el-table__header {
          tr {
            // background-color: transparent;
          }
        }
      }
      .el-table__fixed-body-wrapper {
        .el-table__body {
          tbody {
            tr {
              &:not(.el-table__row) {
                .el-table__cell {
                  &.el-table__expanded-cell {
                    &:hover {
                    }
                    .el-form {
                      .el-form-item {
                        margin-right: 0;
                        margin-bottom: 0;
                        .el-form-item__label {
                        }
                        .el-form-item__content {
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .cell {
            white-space: nowrap;
          }
        }
      }
    }
    // 右侧固定部分样式
    .el-table__fixed-right {
      .el-table__fixed-body-wrapper {
        .el-table__body {
          tbody {
            tr {
              &:not(.el-table__row) {
                .el-table__cell {
                  &.el-table__expanded-cell {
                    background-color: yellow;
                    &:hover {
                      background-color: yellow !important;
                    }
                    .el-form {
                      .el-form-item {
                        margin-right: 0;
                        margin-bottom: 0;
                        .el-form-item__label {
                        }
                        .el-form-item__content {
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .cell {
            white-space: nowrap;
          }
        }
      }
    }
  }
  .el-button {
    min-width: 0;
    padding: 0;
  }
}
</style>