elementui单据

以下是关于Element UI在单据类业务场景中的应用方法和相关组件的整理：

表单组件基础应用

Element UI的el-form组件适合构建单据类界面，支持动态表单、验证规则和布局控制。表单验证通过rules属性配置，可设置必填项、格式校验等规则。

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="单据编号" prop="code">
    <el-input v-model="formData.code"></el-input>
  </el-form-item>
  <el-form-item label="创建日期" prop="date">
    <el-date-picker v-model="formData.date"></el-date-picker>
  </el-form-item>
</el-form>

表格数据展示

单据明细通常使用el-table展示，支持分页、排序和行内编辑功能。通过scope slot可实现自定义列模板。

<el-table :data="detailList">
  <el-table-column prop="product" label="产品名称"></el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button @click="editRow(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

单据状态管理

使用el-tag组件直观展示单据状态，不同状态可配置不同颜色：

<el-tag :type="statusTagType(order.status)">
  {{ order.statusText }}
</el-tag>

审批流程设计

单据审批流可采用el-steps组件可视化展示，结合时间线组件显示处理记录：

<el-steps :active="currentStep">
  <el-step title="提交"></el-step>
  <el-step title="审核"></el-step>
  <el-step title="完成"></el-step>
</el-steps>

附件上传功能

通过el-upload实现单据附件上传，支持限制文件类型和大小：

<el-upload
  action="/api/upload"
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button type="primary">点击上传</el-button>
</el-upload>

响应式布局方案

单据页面可采用el-row和el-col实现栅格布局，适配不同屏幕尺寸：

<el-row :gutter="20">
  <el-col :span="12">基础信息</el-col>
  <el-col :span="12">扩展信息</el-col>
</el-row>

自定义校验规则

针对复杂业务规则，可在表单验证中配置自定义校验函数：

const validateAmount = (rule, value, callback) => {
  if (value > 10000) {
    callback(new Error('金额超过限额'));
  } else {
    callback();
  }
};

单据打印优化

结合CSS媒体查询设置打印样式，隐藏操作按钮等非必要元素：

@media print {
  .no-print {
    display: none;
  }
}

以上方案可根据实际业务需求组合使用，Element UI的组件API支持深度定制，建议参考官方文档进行扩展开发。对于复杂单据场景，可将表单拆分为多个子组件提升可维护性。