antd vue3 form 表单的赋值和取值问题
当点击编辑的时候给form表单赋值,如下图。最后在记录一下table 渲染按钮。
·
当点击编辑的时候给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渲染,真是太神奇了
},
]
更多推荐
已为社区贡献1条内容
所有评论(0)