怎么给这里面的子组件只读 div class=padding 20px; a-form form=recordForm a-dividera-divider dynamic-form ref=dynamicRef

要将子组件设置为只读，可以通过以下几种方式实现：

1. 在子组件的props中添加一个只读属性，然后在子组件中根据该属性的值来决定是否禁用相关的表单项或输入框。

2. 在父组件中通过v-bind指令将一个只读的变量传递给子组件，然后在子组件中根据该变量的值来决定是否禁用相关的表单项或输入框。

下面是使用第二种方式的示例代码：

<template>
  <div class="padding: 20px;">
    <a-form :form="recordForm">
      <a-divider></a-divider>
      <dynamic-form
        ref="dynamicRef"
        :wrapHeight="360"
        :arr="arr"
        :workId="this.mdl.workId"
        :name="this.mdl.name"
        :compCode="this.mdl.compCode"
        :readOnly="readOnly"
      />
    </a-form>

    <div style="margin-top: 15px;">{{ param.field }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      readOnly: true, // 设置只读属性
      // 其他数据...
    };
  },
  // 其他代码...
};
</script>

在子组件中，可以通过props来接收并使用readOnly属性来决定是否将相关的表单项或输入框设置为只读状态。例如：

<template>
  <div>
    <a-input :disabled="readOnly" />
    <!-- 其他表单项... -->
  </div>
</template>

<script>
export default {
  props: {
    readOnly: {
      type: Boolean,
      required: true,
    },
  },
  // 其他代码...
};
</script>

这样就可以根据父组件中的readOnly属性的值来控制子组件中的表单项或输入框是否可编辑