vue+elementUI可編輯表格、表頭由數據遍歷生成以及el-input自動獲取焦點,el-input自動獲取焦點失效解決辦法

1、實現的效果圖

a、正常情況下：

b、點擊某項並且是可編輯時，顯示input框並自動獲取焦點：

c、當input框失去焦點或者改變值按回車，又變回a圖

2、重點代碼

（1）html部分

        <el-table-column
          v-for="it in xmls"
          :key="it.id"
          :label="it.name"
          :prop="it.code"
          width="100"
          :show-overflow-tooltip="true"
          align="right"
        >
          <template scope="scope">
            <span
              v-if="it.editeFlag&&scope.row[it.code].editing"
              style="display:inline-block;width:100%;height:100%;"
            >
              <el-input
                ref="inputRef"
                v-model="scope.row[it.code].value"
                placeholder="請輸入內容"
                @change="closeEdit(scope.row,it)"
                @blur="closeEdit(scope.row,it)"
              />
            </span>
            <span
              v-if="!scope.row[it.code].editing"
              style="display:inline-block;width:100%;height:100%;"
              @click="handleEdit(scope.row,it)"
            >{{scope.row[it.code].value}}</span>
          </template>
        </el-table-column>
    

（2）js

methods: {
    handleEdit(row, it) {
      //遍歷數組改變editeFlag
      if (it.editeFlag) {
        row[it.code].editing = true;
        this.$nextTick(function() {
          //DOM 更新了
          console.log(this.$refs.inputRef);
          this.$refs.inputRef[0].focus();
        });
      }
    },
    closeEdit(row, it) {
      row[it.code].editing = false;
    }
  }

（3）數據：

this.xmls = [
      { id: 1, name: "A", code: "aaa", editeFlag: true },
      { id: 2, name: "B", code: "bbb", editeFlag: false },//定義第二列不能編輯
      { id: 3, name: "C", code: "ccc", editeFlag: true }
    ];
    this.items = [
      {
        id: 11,
        xm: "A資金",
        num: 1,
        aaa: {
          value: "Aa1",
          editing: false//定義數據是否在編輯狀態
        },
        bbb: {
          value: "Bb1",
          editing: false
        },
        ccc: {
          value: "Cc1",
          editing: false
        }
      },
      {
        id: 12,
        xm: "B資金",
        num: 2,
        aaa: {
          value: "Aa2",
          editing: false
        },
        bbb: {
          value: "Bb2",
          editing: false
        },
        ccc: {
          value: "Cc2",
          editing: false
        }
      },
      {
        id: 13,
        xm: "C資金",
        num: 3,
        aaa: {
          value: "Aa3",
          editing: false
        },
        bbb: {
          value: "Bb3",
          editing: false
        },
        ccc: {
          value: "Cc3",
          editing: false
        }
      }
    ];

3、this.$refs.inputRef[0].focus();要用0的原因

（1）注意看，ref="inputRef"是位於v-for里面的，所以this.$refs.inputRef得到的是數組,如下圖

（2)再做一個測試,在固定的表頭加個ref，如下圖

所以，ref="inputRef"是位於v-for里面的，當然得用this.$refs.inputRef[0].focus();

而不是this.$refs.inputRef.focus();這個會報focus不是函數的錯誤。

 4、el-input自動獲取焦點失效解決辦法

this.$nextTick(function() {
          //DOM 更新了
          console.log(this.$refs.inputRef); this.$refs.inputRef[0].focus(); });

有時候nextTick也不行，我也不知道啥原因，網上很多都是說加定時器之類的，但是我都試了，沒用。

現在我的解決辦法是用CSS樣式解決
（1）先看效果

（2）其實就只是用到el-input框，正常的時候去掉樣式，獲取焦點的時候再賦予樣式
html部分代碼

<el-table-column
          label="崗位檔序"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.kqlrbm.gwdx"
              class="lrInput"
              :readonly="showSb"
              @focus="handleEdit(scope.row)"
              @change="closeEdit(scope.row)"
              @blur="closeEdit(scope.row)"
            />
          </template>
        </el-table-column>

我用readonly屬性來控制輸入框是否可以編輯，這是因為業務原因，比如數據上報了，那么就不允許再編輯了，至於@focus、@change、@blur等事件，根據自己的業務需求來寫。

css部分

<style scoped >
.lrInput >>> .el-input__inner {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  text-align: right;
}
.lrInput >>> .el-input__inner:focus {
  border: 1px solid #1890ff;
  background-color: #fff;
  text-align: left;
}
</style>

比之前的簡單點吧。

 

最后：

參考鏈接1

參考鏈接2