ant a-table 表格校验 行内校验 ,树形表格,展开行校验

<template>
  <a-form
      ref="formRef"
      :model="formData"
  >
    <a-table
        class="ant-table-striped"
        ref="tableRef"
        :data-source="formData.tableData"
        bordered
        :pagination="false"
        :columns="columns"
        :defaultExpandAllRows="true"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'test'">
          <p>绑定的name值:{
  {record.namePath}}</p>
          <a-form-item
              :rules="rules.requiredStr"
              validateFirst
              :title="record[column.dataIndex]"
              :name="record.namePath"
          >
            <a-input
                v-model:value="record[column.dataIndex]"
                allowClear
                :maxlength="100"
            ></a-input>
          </a-form-item>
        </template>
      </template>
    </a-table>
  </a-form>
</template>
<script setup>
import { ref } from 'vue';

const formRef = ref();
const rules = ref({
  requiredStr: [{ required: true, message: '非空项', trigger: 'blur' }]
});
const columns = ref([
  {
    title: '节点',
    dataIndex: 'text',
    key: 'text',
    ellipsis: true,
    width: 250
  },
  {
    title: '测试',
    dataIndex: 'test',
    key: 'test',
    ellipsis: true,
    width: 250
  }
]);
const formData = ref({
  tableData: [{
    id: '1',
    parentId: 'root',
    text: '根节点',
    actionUrl: '',
    type: '',
    showOperatePrivilege: true,
    effectiveFlag: '1',
    iconSkin: '',
    chkDisabled: false,
    checked: false,
    open: true,
    nocheck: false,
    sortOrder: 1,
    namePath: ['tableData', 0, 'test'],
    children: [
      {
        id: '8a74839b8d582387018d58eedf870026',
        parentId: '1',
        text: '二级节点',
        code: '8a74839b8d582387018d58eedf870026',
        actionUrl: '',
        type: '',
        namePath: ['tableData', 0, 'children', 0, 'test'],
        showOperatePrivilege: true,
        effectiveFlag: '1',
        iconSkin: '',
        chkDisabled: false,
        checked: false,
        open: true,
        nocheck: false,
        children: [
          {
            id: '8a74839b8d582387018d58eedf870026',
            parentId: '8a74839b8d582387018d58eedf870026',
            text: '三级节点',
            code: '8a74839b8d582387018d58eedf870026',
            actionUrl: '',
            type: '',
            showOperatePrivilege: true,
            effectiveFlag: '1',
            iconSkin: '',
            chkDisabled: false,
            checked: false,
            open: true,
            nocheck: false,
            year: '三级节点',
            isEnd: true,
            namePath: ['tableData', 0, 'children', 0, 'children', 0, 'test']
          },
        ],
      }
    ]
  }]
});
</script>

在这里插入图片描述
在这里插入图片描述

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-06 20:46:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-06 20:46:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-06 20:46:03       82 阅读
  4. Python语言-面向对象

    2024-02-06 20:46:03       91 阅读

热门阅读

  1. C#面:.NET Remoting 的工作原理是什么

    2024-02-06 20:46:03       53 阅读
  2. (三)相机的分类与选型

    2024-02-06 20:46:03       60 阅读
  3. Excel文件按照列内容进行分组

    2024-02-06 20:46:03       45 阅读
  4. Linux前后端程序部署

    2024-02-06 20:46:03       41 阅读
  5. 假期2.5

    2024-02-06 20:46:03       49 阅读
  6. 设计模式(结构型模式)适配器模式

    2024-02-06 20:46:03       50 阅读
  7. ChatGPT 和文心一言哪个更好用?

    2024-02-06 20:46:03       51 阅读