element-ui 中 el-table 根據scope.row行數據變化動態顯示行內控件

時間 2020-09-14

標籤 element table 根據 scope.row scope row 數據變化動態顯示控件简体版

原文原文鏈接


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

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

若是這裏v-show=「scope.row.edit」，由於scope.row原本沒有edit這個字段，當在vue的methods中改變edit值時，不能馬上反應在view中。vue

因此只能綁定scope.row已存在的字段，可是又出現一個問題，改變綁定的字段時數據的變化會反應在表格數據上。數組

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

<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>

methods中spa

handleEdit(index, rowData) {
    rowData.propertyId = rowData.propertyId.toString();
  }

後來摸索，找到了最終解決方案：動態給全部數組記錄添加edit屬性，code

JSON.parse(JSON.stringify(this.archives.paperRecord ? this.archives.paperRecord : []))

<el-table
      :data="recordTable">
</el-table

let data = JSON.parse(JSON.stringify(this.archives.paperRecord ? this.archives.paperRecord : []))
      data.forEach(element => {
        element['edit'] = false
      });
      this.recordTable = data

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。