vue3+antd table 只校验选中的数据中必填字段

 - 动态校验层级较深的必填字段、自定义校验
 

```html
<template>
  <a-button type="primary" ghost @click="handleSubmit"></a-button>
  <a-form :model="tableData" ref="tableFormRef">
    <a-table
      :columns="columns"
      :data-source="tableData"
      :row-selection="rowSelection"
      :rowKey="(record) => record.id"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === firstContactListName">
          <span v-for="(item, ind) in firstContactList" :key="ind">
          // 校验联系人name必填
          // isSeledted返回值为true时,给a-form-item加name的规则 否则为null 没有规则就不校验;
            <a-form-item
              :name="isSeledted(record) ? [index, 'firstContactList', ind, 'name'] : null"
              :rules="{
                message: '联系人name必填',
                trigger: 'blur',
                required: true
              }"
            >
              <a-input
                v-model:value="item.name"
                :disabled="record.status === '1' ? true : false"
              />
            </a-form-item>
          </span>
        </template>
      </template>
    </a-table>
  </a-form>
</template>```

```javascript
<script>
import { defineComponent, ref, reactive } from 'vue';
import { message } from 'antd-design-vue';
export default defineComponent({
  setup() {
  	const tableFormRef = ref();
  	const selectedRowIds = ref([]);
  	const selectedRows = ref([]);
  	const rowSelection = reactive({
		fixed: true,
		onChange: (selectedRowKeys, selectedRows) => {
			selectedRowIds.value = selectedRowKeys;
			selectedRows.vaue = selectedRows;
		}
	});
    const columns = ref([
      {
        title: 'first Contact Name',
        detaIndex: 'firstContactList',
        key: 'firstContactListName',
        wdith: 200
      },
      {
        title: 'first Contact Email',
        detaIndex: 'firstContactList',
        key: 'firstContactListEmail',
        width: 200
      },
      {
      	title: 'Status',
      	detaIndex: 'status',
      	key: 'status'
      }
    ]);
    // 表格数据
    const tableData = ref([
    	{
    		id: '',
    		status: '',
    		statusName: '',
    		createTime: '',
    		firstContactList: [
	    		{
	    			id: '',
	    			name: '',
	    			email: '',
				},
				{
	    			id: '',
	    			name: '',
	    			email: '',
				},
			]
    	}
    ]);
    // 判断是否是选中的数据
    const isSeledted = computed(() => (record) => {
    	return selectedRows.value.some(t => t.id === record.id);
    });
	// 提交
	const handleSubmit = () => {
		tableFormRef.value.validateFields().then(res => {
			if(!selectedRows.value.length) {
				 message.warning('至少选择一条数据');
				 return
			}
			// 接口请求
		}).catch(err => {
			console.log(err);
		})
	}
    return {
      columns,
      tableData,
      tableFormRef,
      handleSubmit,
      isSeledted
    };
  },
});
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值