vue セット el-table. 特定の列をクリックすると、編集可能な入力ボックスが表示されます。

el-table を設定します。特定の列をクリックすると、編集可能な入力ボックスが表示されます。マウスのフォーカスを入力ボックスから外すと、入力ボックスが消え、対応する値が表示されます。以下の図に示すように:

具体的な実装:

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick">      
        <el-table-column label="顺序" prop="adSort">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'">
              <el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="请输入顺序" size="mini" @blur="inputBlur(scope.row)" />
            </span>
            <span v-else>{
    
    {
    
     scope.row.adSort }}</span>
          </template>
        </el-table-column>
</el-table>

tableRowClassName を通じて各行のインデックスを設定します。

tableRowClassName ({
    
     row, rowIndex }) {
    
    
      // 把每一行的索引放进row
      row.index = rowIndex
}

行クリック イベント。行がクリックされると、行の特定の列が tabClickIndex を設定します。
v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'" により、現在の行の特定の列がクリックした行 入力ボックスが表示されます:

// tabClick row 当前行 column 当前列
tabClick (row, column, cell, event) {
    
    
      switch (column.label) {
    
    
        case '顺序':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
}

マウスのフォーカス外イベント:

// 失去焦点初始化
inputBlur (row) {
    
    
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''     
}