我在eltable就变了个模样，请你不要再想我，想起我

0. 缘起

上次提到过由于层级过深，模板无法及时感应数值变化而更新，那么这回的【按钮内容不及时更新】虽然表现和上次的一样，解决方法却不是一样的。

层级过深无法探知改变的传送门

1. el-table之殇

一言难尽啊，这玩意的变化不能如我所想，我也不太会做动态表格项。后来想想，如果用之前封装的超级表格JSX来写，就能做到动态改变了。
但是一般的el-table，我目前还没想到很好的动态改变方法。

2. 未变

名字	表格其他项	动作
|测试	other	（改变名称按钮）
测试2	other	（改变名称）

表格有个tableData作为数据来源，我原本的想法就是每一行都添加1个isEdit，标明是否修改的状态。默认isEdit为false，点击取反，true则是正在修改状态，显示测试的名字会变成输入框形式，此时按钮名称变为【保存修改】，再次点击则显示【改变名称】。

结果，我查看handleClick方法时，传入的row相关的isEdit值确实改变了，但按钮名称和span并没有改变。

我以为还是层级过深未获取改变，照着之前的方法用函数返回值，却还是没有变化。

3. 变化

我向组长请教，他演示了下，用1个data里注册的isEdit配合tableData每项都有的id来改变表格中的span与按钮名称。

      <el-table-column label="路由名称" align="center">
        <template slot-scope="scope">            
        // Change InputArea and Button Name 
        // By uiId & isEdit Flag
        // If uiId IS not suitable, 
        // Or if isEdit Flag is false
        // it will not change.
          <span
            v-if="
              uiId !== scope.row.uiId || (uiId === scope.row.uiId && !isEdit)
            "
            >{{ scope.row.menuAlias }}</span
          >
          <el-input
            v-else
            @input="onInput()"
            v-model="scope.row.menuAlias"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="可见性" align="center">
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.hidden"
            active-color="#13ce66"
            inactive-color="#7f7f7f"
            active-text="可见"
            inactive-text="隐藏"
            :active-value="0"
            :inactive-value="1"
            @change="changeStatement(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right" min-width="130%">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="changeAlias(scope.row)"
            ><span
              v-if="
                uiId !== scope.row.uiId || (uiId === scope.row.uiId && !isEdit)
              "
              >修改名称</span
            ><span v-else>确认修改</span>
          </el-button>
        </template>
      </el-table-column>

// methods中
    onInput() {
        // Force Dom To Update
      this.$forceUpdate();
    },
    changeAlias(row) {
      this.uiId = row.uiId;
      this.isEdit = !this.isEdit;

      if (!this.isEdit) {
        updateLayout(row).then((res) => {
          this.$message.success("名称修改成功");
        });
      }
    },