avue小技巧,自定义表单显示*

在写avue的表单校验的时候,发现他这个自定义校验没办法展示*,然后想了个取巧的办法,校验的字段我固定给他个值,让他一定通过,然后自定义校验另一个字段,然后用v-model + computed把原本要赋值到固定值字段拦截并赋值到第二个字段上,完美

      <template #selectPackage="{column}">
        <div class="flex">
          <el-select
            v-model="selectPackage"
            placeholder="搜索 套餐名称"
            :loading="selectPackageLoading"
          >
            <el-option
              v-for="item in packageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </template>

      <script setup>
      import { computed } form 'vue'
      
        const option = {
            column: [{
              label: '选择套餐',
              prop: 'selectPackage',
              type: 'select',
              placeholder: '请选择 套餐',
              required: true,
              rules: [
              {validator: validatePackage, message: '请选择套餐', trigger: 'blur'},
              {required: true, message: '请选择套餐', trigger: 'blur'}
              ],
              span: 6 
            }]
        }
      
        const selectPackage = computed({
          get() {
            return form.value.comboId
          },
          set(val) {
            form.value.comboId = val
          }
        })

    // validatePackage
    function validatePackage (rule, val, callback) {
      if(!form.value.comboId) callback(new Error('请选择套餐'))
      else callback()
    }