el-descriptions-item表单验证

### 如何对 `el-descriptions-item` 进行表单验证

对于 `el-descriptions-item` 的表单验证，虽然该组件主要用于展示数据而非收集用户输入，但在某些场景下确实可能需要对其进行验证。为了实现这一点，可以考虑将其嵌入到支持验证的父级容器中，比如 `<el-form>` 和 `<el-form-item>` 组件。

#### 使用 Form 验证 Descriptions Item

由于 `el-descriptions-item` 并不是直接用于接收用户输入的控件，因此不能像其他输入型组件那样简单地绑定 v-model 或者设置 prop 属性来触发内置验证逻辑。相反，应该把要显示的内容放在能够参与验证流程的地方，例如隐藏域或其他形式的可编辑字段内，并通过 CSS 控制样式使其看起来像是只读模式下的描述项。

下面是一个简单的例子说明如何将 `el-descriptions-item` 转换成带有验证功能的形式：

<template>
  <div>
    <!-- 将 el-descriptions 放置在一个 form 表单项里 -->
    <el-form :model="form" ref="ruleFormRef">
      <el-row type="flex" justify="space-between">

        <!-- 把原本的 el-descriptions 替换为 el-input 等具有交互性的组件 -->
        <el-col :span="8">
          <el-form-item label="姓名：" prop="name">
            <el-input v-if="editable" v-model.trim="form.name"></el-input>
            <span v-else>{{ form.name }}</span>
          </el-form-item>
        </el-col>

        <!-- 更多类似的列... -->

      </el-row>
      
      <!-- 提交按钮和其他操作 -->
      <el-button @click="submitForm('ruleForm')">提交</el-button>
    </el-form>
    
    <!-- 切换编辑状态 -->
    <el-button @click="toggleEdit">{{ editable ? '完成' : '编辑' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
const state = reactive({
  editable: false,
  form: {
    name: '',
  },
});

// 定义校验规则
const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: ['blur'] }
  ]
};

function toggleEdit() {
  state.editable = !state.editable;
}

async function submitForm(formName) {
  try {
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        alert('提交成功!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  } catch (err) {
    console.error(err);
  }
}
</script>

在这个案例中，当处于非编辑状态下时，数据显示为普通的文本；一旦切换至编辑模式，则变为实际可用作输入的元素并应用相应的验证规则[^1]。