iview + vue 细节问题 1.0

1、// 查看大图
// userPhoto是引进的错误图片
import userPhoto from '@/assets/images/logo_1_mini.png'
data定义：
	imageDomain,
 	imgModal: false,
 	bigImg: '',
	userPhoto,
 columns:[
 	{
                    title: '门店banner',
                    key: 'imageUrl',
                    align: 'center',
                    // render函数：
                    render: (h, params) => {
						return h('div', [
							h('img', {
							// attrs 函数
								attrs: {
									src: `${params.row.imageUrl !== null ? (imageDomain + params.row.imageUrl) : userPhoto}`
								},
								// 样式
								style: {
									width: '40px',
									height: '40px',
									margin: 'auto'
								},
								on: {
									click: () => {
										if (params.row.imageUrl !== null) {
											this.bigImg = params.row.imageUrl;
											this.imgModal = true;
										}
									}
								}
							})
						])
					}
                },
 ]

2、 // 搜索框是下拉框选择时
如果选择之后再搜索，会传 undefined 到后台
这时应该在获取列表时定义下

getList () {
                this.spinShow = true;
                let formData = new FormData();
                formData.append('pageSize', this.pageSize);
                formData.append('currentPage', this.currentPage);
                formData.append('LIKE_name', this.searchForm.name);
                // 定义如果是 undefined 时定义为空
                formData.append('EQ_type', this.searchForm.type === undefined ? '' : this.searchForm.type);
                formData.append('timeStatus', this.searchForm.timeStatus === undefined ? '' : this.searchForm.timeStatus);
				getActivityList(formData).then(res => {
					this.spinShow = false;
					if (res !== false) {
                        this.dataList = res.data.data;
                        this.total = res.data.totalElements;
                    }
                })
            },

3、// 如果查看和编辑是访问同一个页面，记得传参时 + &type=0 区分

on: {
	click: () => {
        this.$router.push('/offline-shop/activity-manage/add?activityId='+ params.row.activityId + '&type=0')
	}
}

4、// 控制表格的 title 显示内容，使用 renderHeader 函数

{
	// 使用 renderHeader 函数，title就不需要
   // title: this.$route.query.type === '1' ? '退款编号' : ' ',
    key: 'refundCode',
    align: 'center',
    renderHeader: (h, params) => {
        return h('span',this.$route.query.type === '1' ? '退款编号' : ' ',)
    },
    render: (h, params) => {
        return h('span',
            params.row.refundCode === null ? ' ' : params.row.refundCode
        )
    }
}

5、// 小数点后只保留两位数使用 .toFixed(2)
// 在有些情况下，表格里面有些内容没有时，要显示 —

 {
       title: '运费',
        key: 'carriageAmount',
        align: 'center',
        render: (h, params) => {
            return h('span', params.row.carriageAmount === null ? '—' : params.row.carriageAmount.toFixed(2))
        }
    },

6、// 验证快递单号（在data里面验证）
const validOrder = (rule, value, callback) => {
if (value === ‘’) {
callback(new Error(‘请输入快递单号’))
} else {
var reg = /¹{7,20}$/
if (!reg.test(value)) {
callback(new Error(‘请输入正确格式的快递单号’))
}
callback()
}
}

7、// 根据状态判断按钮的显示

h('Button', {
    props: {
       type: 'primary',
       size: 'small'
     },
     style: {
       marginLeft: '5px',
       // 判断条件
       display: (params.row.status === '已发货' && params.row.receiveType === '线上发货') ? 'inline-block' : 'none'
     },
     on: {
       click: () => {
       }
     }
   }, '修改快递')

8、// 在路由里面判断页面名称

{
    path:'add',
     name:'add_commodity',
     meta: {
         icon: '',
         // 判断条件
         title: route =>  `${route.query.id === undefined? '添加': (route.query.type === '0'?'查看':'修改')}商品` ,
         notCache: true,
         // hideInMenu: true
     },
     component: () => import('@/view/commodity/add-commodity')
 },

9、查看详情，返回列表，清缓存问题：

data () {
		return {
			firstInit: '',
            isBack: false,
		}
	}

watch: {
	'$route'(to, from) {
		if (from.name === 'news_add' && to.path === '/operate/news-manage/list') {
			if (from.query.id === undefined) {
				this.currentPage = 1;
			}
			this.isBack = true;
		}
	}
},
created() {
	this.firstInit = true;
},
activated() {
	if (this.isBack || this.firstInit|| this.$route.meta.isNew ) {
			this.getList();
	}
	this.isBack = false;
	this.firstInit = false;
},

---

1. 0-9 ↩︎