2023-7-5

生成代码的列表界面，在数据行里增加一个操作列 查看按钮，打开编辑框，然后让编辑框成为一个只读的查看界面。

页面对应的js文件中增加如下 this.columns.push 函数内容。 按钮的点击事件 重点代码 this.edit(row);  这就是框架里编辑按钮对应的buttons.js中打开编辑界面操作的函数。 然后通过this.editFormOptions.forEach 遍历编辑框所有字段，给他们的type设置为label。

 this.editFormOptions.forEach(x => {
          x.forEach(item => {
            item.type='label';
          })
        })

onInit() {  //框架初始化配置前，
        //示例：在按钮的最前面添加一个按钮
        //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
        //     name: '按钮', //按钮名称
        //     icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon，vue3版本见element ui文档icon(注意不是element puls文档)
        //     type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
        //     onClick: function () {
        //       this.$Message.success('点击了按钮');
        //     }
        //   });

        //示例：设置修改新建、编辑弹出框字段标签的长度
        this.boxOptions.labelWidth = 150;

        this.columns.push({
          title: '操作',
          field: '操作',
          width: 150,
          align: 'center',
          render: (h, { row, column, index }) => {
            return (
              <div>
                <el-button
                  onClick={($e) => {
                    this.edit(row);
                  }}
                  type="primary"
                  plain
                  size="small"
                  style="height:26px; padding: 10px !important;"
                >
                  查看
                </el-button> 
              </div>
            );
          }
        });

        this.editFormOptions.forEach(x => {
          x.forEach(item => {
            item.type='label';
          })
        })
    },

效果图如下：

---