当点击编辑的时候给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渲染,真是太神奇了
        },
    ]

Logo

前往低代码交流专区

更多推荐