Vue项目踩坑记录

Vue项目踩坑记录

1.赋值

动态设置表单页面选项的显示、隐藏和必填等

let Columns = BaseColumns; // BaseColumns在配置文件写的原始配置
if (``条件``) {
	Columns[index] = newColumnItem;
	this.Columns = Columns;
}

一般这样就直接生效了,如果是异步请求则不一样

//BaseColumns的结构
BaseColumns: {
	obj: {
		...,
		list: []
	}
}
let Columns = BaseColumns; // BaseColumns在配置文件写的原始配置
if (``条件``) {
	Columns['obj']['list'][index] = newColumnItem;
	this.Columns = Columns;
	this.$set(this.Columns['obj']['list'], index, newColumnItem);
	// 必须要具体到数组的哪一列，直接赋值整个数组是没有用的
}

原因暂时没时间细究，待研究！

2.el-form中使用v-for循环给el-form-item动态设置ref

通常写法

<el-form :model="searchForm" ref="searchForm" label-position="right" label-width="120px">
	<el-row  class="JNPF-common-search-box" :gutter="4">
		<el-col :span="8" v-for="(item, index) in adminTempList" :key="index">
			<el-form-item :ref="item.key" v-if="item.key == 'F_PriceTypeId'" :label="item.FieldName">
			 <el-select class="col-select" v-model="item.val" multiple :placeholder="'请选择'+item.FieldName" clearable  filterable remote :remote-method="(query) => remoteMethod(query, item)">
					<el-option v-for="opt in options" :key="opt[item.props.value]" :label="opt[item.props.label]" :value="opt[item.props.value]"></el-option>
			  </el-select>
			</el-form-item>
		</el-col>
	</el-row>
</el-form>

这个时候通过this.$refs.[item.key]有时候能取到，有的时候不能取到，原因我还没找到。
使用this.$nextTick()也不行！
但是改成下面这种写法就一定能取到。

<el-form :model="searchForm" ref="searchForm" label-position="right" label-width="120px">
	<el-row  class="JNPF-common-search-box" :gutter="4">
		<el-col :span="8" v-for="(item, index) in adminTempList" :key="index">
			<el-form-item ref="itemRef" v-if="item.key == 'F_PriceTypeId'" :label="item.FieldName">
			 <el-select class="col-select" v-model="item.val" multiple :placeholder="'请选择'+item.FieldName" clearable  filterable remote :remote-method="(query) => remoteMethod(query, item)">
					<el-option v-for="opt in options" :key="opt[item.props.value]" :label="opt[item.props.label]" :value="opt[item.props.value]"></el-option>
			  </el-select>
			</el-form-item>
		</el-col>
	</el-row>
</el-form>
通过this.$refs.itemRef[index]可以取到所有的！

初步分析愿意，应该跟渲染机制有关。