vue点击详情，所有字段只读

要实现Vue中点击详情后所有字段只读的功能，你可以使用Vue的`v-model`指令和`readonly`属性结合起来实现。

首先，你可以为每个字段创建一个响应式的数据属性。然后，在点击详情时，将这些属性的值赋给表单中的对应字段。接着，通过给表单中的输入框添加`readonly`属性，使其只读。

以下是一个简单的示例：

<template>
  <div>
    <button @click="showDetails">详情</button>
    <form>
      <label>姓名:</label>
      <input v-model="name" :readonly="readOnly" />
      <br />

      <label>年龄:</label>
      <input v-model="age" :readonly="readOnly" />
      <br />

      <!-- 其他字段 -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      // 其他字段
      readOnly: false, // 控制字段是否只读的标志
    };
  },
  methods: {
    showDetails() {
      // 点击详情按钮时将字段值赋给表单
      this.name = 'John';
      this.age = '25';
      // 其他字段的赋值

      this.readOnly = true; // 将字段设置为只读
    },
  },
};
</script>

在上面的示例中，当点击详情按钮时，`showDetails`方法会将字段值赋给对应的数据属性，并将`readOnly`属性设置为`true`，使得输入框变为只读状态。你可以根据实际需要来扩展和调整这个示例。