el-table中操作一欄怎么根據當前行的信息顯示編輯、刪除、編輯完成按鈕

對每個按鈕是否顯示，使用v-show綁定變量，因為每一行的v-show綁定的變量必須是唯一的（不然的話操作此行，其他行的狀態也會跟着變化），所以不可能提前在.ts中對變量進行初始化，只能使用本行的字段進行v-show綁定。

加入本行的數據為scope.row，其數據格式為

              {
                    "propertyId": 4,
                    "propertyName": "標題",
                    "propertyType": 0
                },            

如果這里v-show=“scope.row.edit”，因為scope.row本來沒有edit這個字段，當在.ts中改變edit值時，不能立刻反應在view中。所以只能綁定scope.row已存在的字段，但是又出現一個問題，改變綁定的字段時數據的變化會反應在表格數據上。

最后解決辦法：綁定scope.row.propertyId，不改變其值，改變其類型，根據其類型設置按鈕是否顯示。

效果：

　　　　

 

.vue中：

            <el-table-column label="操作">
              <template scope="scope">
                <el-button size="small" type="primary" icon="edit" @click="handleEdit(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)=='number'"></el-button>
                <el-button size="small" type="danger" icon="delete2" @click="handleDelete(scope.$index, props.row.properties)" v-show="typeof(scope.row.propertyId)=='number'"></el-button> 
                <el-button size="small" type="warning" icon="check" @click="handleEditOk(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)!=='number'"></el-button>
              </template>
            </el-table-column>

.ts中：

  handleEdit(index, rowData) {
    rowData.propertyId = rowData.propertyId.toString();
  }
  handleDelete(index, tableData) {
    tableData.splice(index, 1);
  }
  handleEditOk(index, rowData) {
    rowData.propertyId = Number(rowData.propertyId);
  }

 

但是，在ts中並不推薦這樣使用，因為這樣就失去了ts語言類型檢測的意義，最終解決辦法如下：

在.ts文件中定義一個變量minimum=-9999，並將變量editingPropId初始化為minimum，當點擊“編輯”按鈕時，this.editingPropId = rowData.propertyId；當點擊“編輯完成”按鈕時，將this.editingPropId = minimum

.vue中這樣控制各個按鈕的顯示與否：

　　　　<el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" type="primary" icon="edit" @click="handleEdit(scope.row)" v-show="editingPropId !== scope.row.propertyId">
            </el-button>
            <el-button size="small" type="danger" icon="delete2" @click="handleDelete(scope.row)" v-show="editingPropId !== scope.row.propertyId">
            </el-button>
            <el-button size="small" type="warning" icon="check" @click="handleEditOk(scope.row)" v-show="editingPropId === scope.row.propertyId"></el-button>
          </template>
        </el-table-column>