表格嵌套校验

两块一毛四

已于 2024-08-19 08:03:57 修改

阅读量199

点赞数 2

文章标签： vue.js javascript 前端

于 2024-08-16 18:27:08 首次发布

本文链接：https://blog.csdn.net/m244142/article/details/141266825

版权

此类问题需要嵌套

表格部分

  <el-table v-loading="tableLoading" height="100%" :data="tableData">
      <el-table-column v-for="(item, idx) in tableColumns" :key="idx" align="center" v-bind="item" />
    </el-table>

填写部分

const tableColumns: TableColumnProps[] = [
{
    label: '考核评分',
    minWidth: 6,
    formatter(row, column, cellValue, index) {
      return (
        <>
          <el-form label-position="left" model={row} rules={reportDialogConf.value.rules}>
            <el-form-item prop="score">
              <el-input type="number" min="0" max="2" disabled={router.currentRoute.value.query.type == '1'} v-model={row.score} />
            </el-form-item>
          </el-form>
        </>
      );
    },
  },
];

对于子父、循环的表单可利用Promise.all

/** 内容提交 */
const sumbitBtnClick = (flag: 'continue' | 'submit') => {
  Promise.all([taskFormRef.value?.validate()].concat(taskFormRefs.value?.map((ele: any) => ele.validate())))
    .then((el: any) => {
      
    })
    .catch(el => {
    })

};