element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件

缺乏、安全感 2023-06-04 12:51 6阅读 0赞

加入本行的数据为scope.row，其数据格式为

{
            "propertyId": 4,
            "propertyName": "标题",
            "propertyType": 0
     }

如果这里v-show=“scope.row.edit”，因为scope.row本来没有edit这个字段，当在vue的methods中改变edit值时，不能立刻反应在view中。

所以只能绑定scope.row已存在的字段，但是又出现一个问题，改变绑定的字段时数据的变化会反应在表格数据上。

解决办法：绑定scope.row.propertyId，不改变其值，改变其类型，根据其类型设置按钮是否显示

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

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

后来摸索，找到了最终解决方案：动态给所有数组记录 添加edit属性，

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

转载于:https://www.cnblogs.com/ckmouse/p/11490604.html