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;
		}
	});
},

三、最终效果

源码

项目源码