Vue はテーブルを動的に生成します。テーブルをダブルクリックして変更します。

テーブルスタイル

このうち地域列は編集不可領域、他の2列は編集可能領域となっており、この2列のセルをダブルクリックすると編集・修正が可能です。

実装の詳細

列のデータ構造を定義する

columnName の値は列名で、対応する pro の値はインターフェイスによって返される JSON オブジェクトのキーです。

  columns: [  
        {
    
    
          columnName: '地区',
          prop: 'area'
        },
        {
    
    
          columnName: '常住人口(万人）',
          prop: 'peopleNum'
        },
        {
    
    
          columnName: '城镇化率（%）',
          prop: 'cityRate'
        },  
      ],

インターフェースはデータを返します

インターフェイスは配列を返します。これを表すために tableData を使用します。

[
    {
    
    
        "area":"全国",
        "peopleNum":"",
        "cityRate":""
    },
    {
    
    
        "area":"湖南省",
        "peopleNum":"",
        "cityRate":""
    }
]

フォームの生成

@cell-dblclick は、テーブルがダブルクリックされたときの対応するダブルクリック イベントであることに注意してください。

  <el-table @cell-dblclick="handleCellDBClick" :data="tableData" border>
          <!-- 生成列-->
          <el-table-column align="center" v-for="column in columns" :key="column.prop"
                           :label="column.columnName">
            <template slot-scope="scope">
              <!-- 双击时展示input，save实现数据保存-->
              <el-input :id="column.prop" type="number" v-if="scope.row.isEdit === column.prop"
                        v-model="scope.row[column.prop]"
                       @keyup.enter.native="save(scope)"/>
              <span v-else :class="[scope.row.id ? '' : 'summary']">{
   
   {
                   scope.row[column.prop]
                }}</span>
            </template>
          </el-table-column>
        </el-table>

このうち、handleCellDBClick は、編集可能性を実現するためのダブルクリックのコア ロジックです。原理は、ダブルクリック時に行の isEdit 属性を現在の列 columnName に設定することです。この場合、入力ラベルが表示されます
v-if="scope.row.isEdit === column.prop"。 。

   handleCellDBClick(row, column, cell, event) {
    
    
      const columnName = column.property
      const unEditColumns = ['area']
      //如果点击的是地区这一列，则提示不可编辑
      if (unEditColumns.includes(columnName)) {
    
    
        return this.$modal.msgError('当前列不给编辑')
      }
      //设置isEdit属性
      this.$set(row, 'isEdit', columnName)
    
      this.$nextTick(() => {
    
    
        //input标签获取焦点
        document.getElementById(columnName).focus()
      })
    },

Enter をクリックしたら、変更したデータを保存し、@keyup.enter.nativeメソッドを

    save({
    
    row, column}, val, eventStr) {
    
    
      //数据复位，此时input隐藏，展示span
      this.$set(row, 'isEdit', null)
      //调用后台接口保存数据
    },