vue-element-admin框架中elementUI的select下拉列表设置默认
值
官⽹elementUI中的下拉组件select是不带默认值的，如何使其默认加载，可参考如下⽅案。
做了⼀个组件，可公⽤调⽤。
先看下效果
主要涉及就是⽗组件传⼦组件，及⼦组件回传⽗组件的传值操作。
下拉组件代码：
<template>
view ui框架<el-select
v-model="dataValue"
placeholder="请选择"
@change="valueChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script type="text/javascript">
import stringMixin from"./stringMixin";
export default {
name: "XhJSSelect",
components: {},
props: {
options: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
dataValue: "",
};
},
created() {},
watch: {
options: {
handler(newVal) {
if (newVal == "" || newVal == "undefined") {
//TODO
} else {
this.dataValue = this.options[0].value;
}
},
immediate: true,
},
},
computed: {},
methods: {
/
/ 输⼊的值
valueChange(val) {
/** 回调筛选数据 */
this.$emit("value-change", {
index: this.index,
value: val,
data: this.options,
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
传的options是数组，下拉选择事件valueChange，⽤emit回传⽗组件相关需要的值。⽗组件调⽤
引⽤组件：
import XhJSSelect from"@/components/CreateCom/Xh-JS-Select.vue";
添加组件
components: { Pagination, CRMTableHead, importExcel, XhJSSelect },
调⽤：
<XhJSSelect
:options="versionList"
class="search-container"
@value-change="selectValue"
></XhJSSelect>
下拉选择事件
selectValue(params) {//版本下拉选择
this.versionValue = params.value;
},