antd vue3 form 表单的赋值和取值问题_antd组件form表单直接赋值

 当点击编辑的时候给form表单赋值，如下图

<a-form
                :model="formState"  双向绑定的数组
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
            >
 
//给它一个初始值
 interface FormState{
            key:number| undefined,
            name: string,
            gender:number
            department: string,
            dateBirth:string | object,
            salary:number| undefined
        }
        const initialFormState ={
                key: undefined,
                name: "",
                gender: 0,
                department: "",
                dateBirth: "",
                salary: undefined,
                };
 
        let formState = ref<FormState>(
            initialFormState);
 
//表单数据可以通过 record拿到
 
 <a-button type="primary" size="small"
                            @click="edit(record)"  //record数据怎么
拿到的可以看下面的表格代码
                            >编辑</a-button>
 
import { useStore } from "vuex"
const store = useStore()
const emit=defineEmits(["open"])
 
const edit=(record:TableDataType)=>{
    console.log(record,"haha")
    store.commit("changeDate",record)
    emit("open")
}
//然后再存到vuex里面，存值的时候注意一下playload和record应该用的是同一个引用地址，
我这里为了日历组件能够正确显示，原本是直接用playload里面的dateBirth转moment对象，
结果导致表格出错了，后来想了想，改用JSON深复制,重新创建了一个新对象
mutations: {
    changeDate(state,playload){
    const load=JSON.parse(JSON.stringify(playload))
     load.dateBirth=moment(new Date(load.dateBirth))
      state.tableData=load
    }
 
//表格数据存进入之后，就可以取值了，取值我采用wateffect，
在表单弹出的时候将表格数据赋值，这个wateffect也是坑啊,
首次加载自动运行一次，但首次加载的时候vuex还没拿到值，
导致表单数据一直显示不对，找到了半天，加了判断条件，
在vuex有值的时候，赋值就好了，我这里的表单数据时ref包裹的，
最好用ref不然赋值的时候响应式又是个麻烦。
 
const store = useStore()
       watchEffect(()=>{
        visible.value = props.status
        if(store.state.tableData.key){
            formState.value=store.state.tableData
        }
         myTitle.value=formState.value.key?"人员编辑":"人员新增" //这是判断标题的
       })
 
//然后就是点X或者保存的时候把表单数据清空，这里是antd自带的方法，
网上的方法好多都不好使
 import {  Form} from 'ant-design-vue'; //先把表单引进来
 const useForm = Form.useForm;
 const { resetFields } = useForm(formState); 把重置函数解构出来
然后在关闭函数内调用就像
 const closeModal = () => {
        resetFields()
        context.emit("close") //这个是关闭表单的函数
      };

 最后在记录一下table 渲染按钮

//关于按钮渲染也是找了好多方法，
什么插槽啊,customRender，不知道我为什么用时就是不好使，
看了半天antd文档照着写出来的
<a-table 
                :columns="columns" //目录数据
                :data-source="data" //表单数据
                >
                <template  #bodyCell="{column,record}"> 
//也不知道这个插槽为什么叫#bodyCell，照着写就对了
                    <template v-if="column.dataIndex === 'operation'"> 
//这里做一个条件判断，按钮目录标题是operation ，
所以判断按钮目录标题为operation时渲染按钮
                       <a-space>
                            <a-button type="primary" size="small"
                            @click="edit(record)"
                            >编辑</a-button>
                            <a-button type="primary" danger size="small">删除</a-button>
                       </a-space>
                    </template>
                </template>
            </a-table>
 
目录数据
const columns=[
        {
            title: 'NO.',
            dataIndex: 'number',
            key: 'number',
            customRender: (text:renderText) =>{  
               return text.index+1
            },
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '性别',
            dataIndex: 'gender',
            key: 'address',
            customRender: (text:renderText) =>{ 
                if(text.record.gender===1) return "男"
                else return "女" 
//这里用了customRender数据做了简单的渲染,
你这个怎么给的数据结构和官方文档不一样，我打印半天第二个参数，
一直是undefined 后来把text 打印一看，好家伙，record数据在里面呢
                
             },
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
        },
        {
            title: '出生年月',
            dataIndex: 'dateBirth',
            key: 'department',
        },
        {
            title: '薪水',
            dataIndex: 'salary',
            key: 'salary',
        },
        {
            title: '操作',
            key: 'operation',
            dataIndex: 'operation',
            width: '180px',  
//根本不用什么插槽来接，也不用customRender渲染，真是太神奇了
        },
    ]