Ant Design 页面嵌套常见问题汇总
1，vue Ant Design Upload上传本地图片
图片为base64格式，存在imageUrl中
####版权声明：本文为CSDN博主「Hamstery」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/SKY_Lake/article/details/101039707
亲测可用
<template>
<div>
<a-upload
name="avatar"
listType="picture-card"
class="avatar-uploader"
:showUploadList="false"
:customRequest="selfUpload"
:beforeUpload="beforeUpload"
ref="upload"
:disabled="!canClick"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" style="height: 140px;width: 100px;" @click="showImgShade"/>
<div v-else>
<a-icon type="plus" />
<div class="ant-upload-text">添加图片</div>
</div>
<span class="delete-img" @click="deleteImg" v-if="imageUrl">x</span>
</a-upload>
<div class="img-shade" ref="imgShade">
<a-icon type="close" class="close-img-shade" @click="closeImgShade"/>
<img :src="imageUrl" class="box">
</div>
</div>
</template>
<script>
export default {
data () {
return {
imageUrl: '',
canClick: true,
}
},
methods: {
showImgShade() {
this.$refs.imgShade.style.display = "block";
},
closeImgShade() {
this.$refs.imgShade.style.display = "none";
},
deleteImg(e) {
this.canClick = true;
this.imageUrl = '';
e.stopPropagation();
},
getBase64 (img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
},
selfUpload({ action, file, onSuccess, onError, onProgress }) {
const base64 = new Promise(resolve => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result);
this.imageUrl = fileReader.result;
this.canClick = false;
};
});
},
beforeUpload (file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp'
if (!isJPG) {
this.$message.error('请上传图片文件');
}
const isLt2M = file.size / 1024 < 200 && file.size / 1024 > 10;
if (!isLt2M) {
this.$message.error('文件大小应在10KB~20KB之间');
}
return isJPG && isLt2M
},
},
mounted() {
this.$nextTick(function() {
this.$refs.upload.$el.childNodes[0].style.width = "116px";
this.$refs.upload.$el.childNodes[0].style.height = "156px";
this.$refs.upload.$el.childNodes[0].style.position = "relative";
})
}
};
</script>
<style scoped>
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
.delete-img {
display: inline-block;
position: absolute;
left: 95px;
top: 0;
font-size: 20px;
}
.delete-img:hover {
color: #FFF;
}
.img-shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.img-shade .box {
display: block;
margin: 50px auto;
max-width: 400px;
max-height: 560px;
}
.close-img-shade {
color: #FFF;
position: absolute;
font-size: 30px;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>
————————————————
版权声明：本文为CSDN博主「Hamstery」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/SKY_Lake/article/details/101039707
2，Ant design 多选回显
（侵权可删）
1，多选回显的重点是 把需要要回显的数据的id 存入selectedRowKeys调rowSelection 的onchange 去渲染
// 回显选中状态
let selectedRowKeys = []
for (let i = 0; i < this.data.length; i++) {
selectedRowKeys.push(this.backChecked[i])
}
this.rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: this.onSelectChange,
getCheckboxProps: record => {
return {
props: {
defaultChecked: selectedRowKeys.includes(record.userNo)
}
};
},
}
2，回显之后可能存在无法选中的情况，把之前的change事件改成如下
```commonlisp
onSelectChange(selectedRowKeys) {
this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
},
具体代码如下：
```commonlisp
<template>
<a-table :columns="columns" :row-key="record => record.userNo" :data-source="loadData" :pagination="pagination"
:loading="tableloading" @change="handleTableChange" :row-selection="rowSelection">
<span slot="action" slot-scope="text, record">
</span>
</a-table>
</a-card>
</a-modal>
</template>
<script>
const columns = [{
title: '序号',
align: 'center',
scopedSlots: {
customRender: 'serial'
},
width: 60
},
]
export default {
name: 'TableList',
props: {
visible: {
type: Boolean,
required: true
},
loading: {
type: Boolean,
default: () => false
},
model: {
type: Object,
default: () => null
},
modalVisible: {
type: String,
default: () => null
},
},
components: {
STable,
Ellipsis,
},
data() {
this.columns = columns
return {
record: '',
rowSelection: {
selectedRowKeys: [],
onChange: this.onSelectChange
},
mdl: null,
pagination: {
showSizeChanger: true
},
selectedRowKeys: [],
selectedRows: []
}
},
created() {},
computed: {
// rowSelection() {
// return {
// selectedRowKeys: this.selectedRowKeys,
// onChange: this.onSelectChange
// }
// }
},
mounted() {},
watch: {
model(newval, oldval) {
}
},
methods: {
// 查询
getPageList(params = {}) {
this.tableloading = true;
let requestParameters = Object.assign({}, params, this.queryParam)
XXXXX(requestParameters).then(res => {
if (res.code == "00000") {
// 回显选中状态
let selectedRowKeys = []
for (let i = 0; i < this.backChecked.length; i++) {
selectedRowKeys.push(this.backChecked[i])
}
this.rowSelection = {
selectedRowKeys: selectedRowKeys, //这里指的是选中的数组集合，例如["2","3"]
onChange: this.onSelectChange, //使用getCheckboxProps必须结合onChange，官网有介绍
getCheckboxProps: record => { //record代表的是上边示例data的数据
return {
props: {
defaultChecked: selectedRowKeys.includes(record.userNo) //这里意思是选中key为2,3的两项
}
};
},
}
} else {
this.$message.error(res.msg)
}
this.tableloading = false;
})
},
},
onSelectChange(selectedRowKeys) {
this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
console.log(this.rowSelection.selectedRowKeys)
},
}
}
</script>
3，列表内嵌套多选
实现的样式 大概如下
需要主要的点
1，回显数据要比列表数据先加载，就是渲染列表的时候渲染选中状态
<a-table :columns="columns" :row-key="(record) => record.id" :data-source="loadData" :pagination="pagination"
@change="handleTableChange" :row-selection="rowSelection">
<span slot="tags" slot-scope="text, record, index">
<a-checkbox @change="onChangeChecked($event,record.applyNo,record.applyName)" v-if="record.subList !=null"
v-for="(item,index) in record.subList " :key="index" :value="item.id" :defaultChecked="isChecked(item,record)">
{{item.name}}
</a-checkbox>
</span>
</a-table>
// methods 中的方法
//回显选中状态
isChecked(items, record) {
//判断写你的加载的数据逻辑
if(items.id==record.sid){
return true;
}else{
return false;
}
},
4,v-decorator 赋值与取值
赋值(a-select 也可以这样赋值，回显)：
this.form.setFieldsValue({
id: '1213'
})
取值
this.form.validateFields((err, values) => {
this.id = values.id
})
版权声明：本文为L1766038066原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。