xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

vue & template & v-else & v-for bug

nested table bug

https://codepen.io/xgqfrms/pen/wvaGmGE

bug

      <el-table-column
        v-for="({
          prop,
          label,
          align,
          width,
          slot,
        }, i) in selectManageClomuns"
        :key="prop + i"
        :prop="prop"
        :width="width"
        :align="align"
        :label="label">
        <!-- rowSpan ??? -->
        <template
          v-if="tableData[scope.$index].render"
          slot-scope="scope">
          <span>
            {{tableData[scope.$index][prop]}}
          </span>
          <div v-if="prop === 'showName'">
            <el-button
              type="primary"
              size="small"
              @click="editHandler(scope.$index, scope.row)">
              关闭选排
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="editHandler(scope.$index, scope.row)">
              创建新模版
            </el-button>
          </div>
          <div v-else></div>
        </template>
        <template
          v-else
          slot-scope="scope">
          <span>
            {{tableData[scope.$index][prop]}}
          </span>
        </template>
      </el-table-column>

solution

not using v-else template in v-for, instead of using div as box

      <el-table-column
        v-for="({
          prop,
          label,
          align,
          width,
          slot,
        }, i) in selectManageClomuns"
        :key="prop + i"
        :prop="prop"
        :width="width"
        :align="align"
        :label="label">
        <!-- rowSpan ??? -->
        <template
          slot-scope="scope">
          <div v-if="tableData[scope.$index].render">
            <span>
              {{tableData[scope.$index][prop]}}
            </span>
            <div v-if="prop === 'showName'">
              <el-button
                type="primary"
                size="small"
                @click="editHandler(scope.$index, scope.row)">
                关闭选排
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="editHandler(scope.$index, scope.row)">
                创建新模版
              </el-button>
            </div>
          </div>
          <div v-else>
            <span v-if="prop !== 'showName'">
              {{tableData[scope.$index][prop]}}
            </span>
          </div>
        </template>
      </el-table-column>

---