vue elementui列表嵌套功能实现

最新推荐文章于 2024-02-05 12:14:45 发布

小山羊~

最新推荐文章于 2024-02-05 12:14:45 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21747731/article/details/105290576

版权

本文详细介绍了如何在Vue项目中使用ElementUI实现列表的嵌套功能，包括了样式调整、方法实现和后台数据格式的要求，帮助开发者更好地理解和操作复杂的列表组件。

摘要由CSDN通过智能技术生成

    <div class="table_content">
        <el-table
          border
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          row-key="product_id"
          :row-style="rowSty"
          :expand-row-keys="expands"
          :row-class-name="isShowIcon">
          <el-table-column type="expand" class-name="row_a" width="1px">
            <template slot-scope="props">
              <el-table
                v-loading="loading_sub"
                :data="props.row.skuList"
                border
                :show-header="true"
                empty-text="数据正在加载中..."
                :header-cell-style="getRowClass"
                style="width: 100%;max-height: 615px;overflow-y:auto;">
                <el-table-column
                  align="center"
                  prop="id"
                  label="SKU ID"
                  width="150">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="specifications"
                  label="SKU规格"
                  width="150">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="image_url"
                    width="100"
                    label="SKU预览图">
                    <template slot-scope="scope">
                      <img :src="scope.row.image_url" width="50" height="50" class="head_pic" />
                    </template>
                  </el-table-column>
                <el-table-column
                  align="center"
                  pr