-DPDK中文网

要在 radio == '2' 的情况下初始化所有选项，您可以使用 Vue 的 data 选项来设置初始值。在您的组件中，可以通过以下步骤进行实现：

定义数据模型：在 data() 方法中，您需要为 form.contractType, form.contractTemplate 和 form.payPlanInfoList 定义初始值。
在条件渲染时设置初始值：当 radio 的值变为 '2' 时，可以在相应的方法中进行初始化。

这里是一个示例代码片段，展示如何实现这一点：

<template>
  <div v-if="radio=='2'">
    <el-form-item label="合同类型" prop="contractType">
      <SelectMenu style="width: 240px" :disabled="isView" ref="contractType" v-model="form.contractType" type="contractType" :multiple="false" />
    </el-form-item>
    <el-form-item label="合同模板" prop="contractTemplate">
      1
    </el-form-item>
    <el-form-item label="付款计划">
      <el-button class="detail-add-btn" v-if="!isView" type="text" size="small" @click="add()">新增</el-button>
    </el-form-item>
    <el-form-item label="" label-width="60px" prop="payPlanInfoList">
      <div class="detail-table-box">
        <div class="detail-table">
          <el-table class="my-table" :data="form.payPlanInfoList" max-height="400px" style="width: 100%">
            <!-- 表格列 -->
          </el-table>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '', // 控制 radio 的选择
      isView: false, // 控制是否为只读模式
      form: {
        contractType: '',
        contractTemplate: '',
        payPlanInfoList: [] // 初始化为空数组
      }
    };
  },
  watch: {
    radio(newVal) {
      if (newVal === '2') {
        this.initializeOptions(); // 调用初始化方法
      }
    }
  },
  methods: {
    initializeOptions() {
      // 根据需求初始化选项的逻辑
      this.form.contractType = 'defaultContractType'; // 设置默认合同类型
      this.form.contractTemplate = 'defaultContractTemplate'; // 设置默认合同模板
      
      // 初始化付款计划信息列表，这里可以根据实际需要调整结构
      this.form.payPlanInfoList = [
        { payNode: '', payProportion: '', payCondition: '', percen: '' } // 添加一条示例记录，或根据实际需求填充多个记录
        // 可以继续添加更多的预设内容...
      ];
    },
    
    add() {
       // 新增付款计划的逻辑
       this.form.payPlanInfoList.push({ payNode: '', payProportion: '', payCondition: '', percen: '' });
   },
   
   edit(list, index) {
       // 编辑操作的逻辑
   },
   
   remove(list, index) {
       list.splice(index, 1); // 删除指定索引的元素 
   }
}
</script>

<style scoped>
/* 样式相关 */
</style>