VUE常见知识点整理

1. el-select 绑定对象值

<el-select v-model="data" placeholder="请选择" size="small" value-key="id" clearable>
   <el-option
            v-for="(item,index) in channelData"
            :key="item.id"
            :label="item.state"
            :value="item">
    </el-option>
</el-select>

value-key的值与key绑定的属性值对应。其中data为对象值{id:0,state:‘test’};
渲染数据默认绑定的时候value和data需都得为对象，只要key值一致即会展示出channelData中的label值

2. form表单提交制止

form 搜索只有一个input框时阻止enter事件

<el-form :inline="true" :model="formInline" class="demo-form-inline"  @submit.native.prevent>
	<el-form-item>
		<el-input v-model="formInline.keyword" size="small" placeholder="请输入"></el-input>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" size="small" @click="onSearch">查询</el-button>
	</el-form-item>
</el-form>