vue-antd使用Table+Drawer做管理系统增删改查操作

一、查

Table显示查询数据,官方api

1、常用到的属性

属性名描述数据格式
columns(必选)表头

[ {title: '姓名', dataIndex: 'name' }, 

{title: '年龄', dataIndex: 'age'} ]

data-source(必选)表头

[ {UserID:13,name: '张三', age: '12' }, 

{UserID:16,name: '王五', age: '18'} ]

row-key(必选)数据的唯一键值名record => record.UserID
bordered是否需要边框true|false
loading表格的load显隐true|false
pagination表格的分页false|'top' | 'bottom' | 'both'——更多
customRow表格行属性(常用于行点击事件)rowClick(record, index){
        return {
            on: {
               click: () => {
                    console.log(record,index)
               }
            }
        }
    }

2、我的代码:

<template>
    <div>
        <a-table bordered :loading="isTableLoad" :row-key="record => record.UserID"
	 :data-source="tbMainData" :columns="tbMainHead" :customRow="rowClick">
            <!-- 插槽插入图片 -->
	    <img slot="pic" slot-scope="text" :src="text" />
        </a-table>
    </div>
</template>
<script>
	const tbMainHead = [{
		    title: '图片',
		    dataIndex: 'HeadImg',
		    scopedSlots: {
		        customRender: 'pic'
		    },
		},{
		    title: '姓名',
		    dataIndex: 'name',
		},{
		    title: '年龄',
		    dataIndex: 'age',
		}
	];
	export default {
		data() {
		    return {
		        tbMainData: [],
		        tbMainHead,
		        isTableLoad:false,
		    }
		},
		mounted() {
            this.getData()
		},
		methods: {
			getData(){
			    this.isTableLoad=true;
			    this.$http.postHttp("GetAllUser","",(res)=>{
		        	// console.log("返回结果",res);
		                this.isTableLoad=false;
			        if(res){
			            this.tbMainData=res;
			        }
			    })
			},
			rowClick(record, index){
			    return {
			        on: {
			           click: () => {
			               console.log(record,index)
			           }
			        }
			    }
			}
		}
	}
</script>

3、效果

二、增删改

利用antd的Drawer来实现抽屉弹框UI,官方API

1、常用属性

属性名描述数据格式
visible(必选)Drawer 显隐true|false
title标题'抽屉标题'
placement抽屉的方向'top' | 'right' | 'bottom' | 'left'
destroyOnClose关闭时销毁 Drawer 里的子元素true|false
closable是否显示右上角的关闭按钮true|false
width/height宽或高(在placement为top/bottom方可用高)百分百,数字(px)

2,我的代码

<a-drawer title="编辑" 
    destroyOnClose 
    width="45%"
    :visible="isDrawerShow"
     @close="isDrawerShow=false">
	<p>Some contents...</p>
</a-drawer>
rowClick(record, index){
	return {
		on: {
			click: () => {
			    console.log(record,index)
		        this.isDrawerShow = true;//显示抽屉
			}
		}
	}
}

3、表单元素实现编辑

先定义一个form也就是你要操作的那些字段和表单验证规则rules,例:

formData: {
	name: '',
	age: '',
	sex: '',
},
formRule: {
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' },
		{ min: 2, max: 5, message: '姓名长度需在2到5个字符', trigger: 'blur' },
	],
	age: [{ required: true, message: '请输入年龄', trigger: 'change' }],
},

表单html

<a-form-model ref="checkForm" :model="formData"  :rules="formRule">
	<a-form-model-item label="姓名" prop="name">
		<a-input v-model="formData.name" />
	</a-form-model-item>
	<a-form-model-item label="年龄" prop="age">
		<a-input-number v-model="formData.age" />
	</a-form-model-item>
	<a-form-model-item label="性别">
		<a-radio-group v-model="formData.sex">
	        <a-radio value="1">男</a-radio>
	        <a-radio value="2">女</a-radio>
		</a-radio-group>
	</a-form-model-item>
</a-form-model>

提交验证

submitData() {
	this.$refs.checkForm.validate(valid => {
		if (valid) {
		console.log('check ok, to submit');
		} else {
		console.log('error submit!!');
		 return false;
		}
	});
},

三、最终效果

源码

项目源码

  • 4
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于Vue-antd-admin的增删改查操作,你可以按照以下步骤进行: 1. 创建一个数据表格组件,用于展示数据,并导入antdTable组件和相关样式。 2. 在数据表格组件中,使用Table组件的columns属性定义表格的列,每一列对应数据表中的一个字段。同时,在columns中可以定义一些操作列,比如编辑和删除按钮。 3. 在数据表格组件中,通过调用接口获取后端返回的数据,并将数据渲染到表格中。 4. 实现添加功能:创建一个添加数据的弹窗组件,使用antd的Modal组件作为弹窗容器,并在弹窗中设置表单项,根据需要可以使用antd的Form组件来处理表单验证和提交。 5. 在数据表格组件中,通过点击添加按钮打开弹窗组件,填写表单项并提交数据到后端接口。 6. 实现编辑功能:创建一个编辑数据的弹窗组件,与添加数据的弹窗组件类似,但需要在打开弹窗时传入要编辑的数据。 7. 在数据表格组件中,通过点击编辑按钮打开编辑弹窗组件,将要编辑的数据传递给弹窗组件,并在弹窗中显示该数据。修改表单项后,提交修改后的数据到后端接口。 8. 实现删除功能:在数据表格组件中,为删除按钮绑定点击事件,点击时调用后端接口删除对应的数据。 以上是基本的增删改查操作流程,具体的实现细节还需要根据你的具体业务需求进行调整和完善。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值