vue-antd使用Table+Drawer做管理系统增删改查操作
一、查Table显示查询数据,官方api1、常用到的属性属性名描述数据格式columns(必选)表头[ {title: '姓名',dataIndex: 'name'},{title: '年龄',dataIndex: 'age'} ]data-source(必选)表头[ {UserID:13,name: '张三',age: '12'},{UserID:16,name: '王五',...
·
一、查
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;
}
});
},
三、最终效果
源码
更多推荐
已为社区贡献7条内容
所有评论(0)