一 通过后台接口获取数据
一:在vue架构中src下的api文件夹里
import req from "@/request.js";
const cig = req.getContext().cig;
export default {
//获取归集方式列表信息
getDeliveryMthods(cb) {
req
.get(cig + "/sys/dataDict/v1/getByTypeKey?typeKey=deliveryMthods")
.then(response => {
cb(response);
});
}
}
二 在vue架构中src下的store文件夹里设置vuex的内容
import selects from "@/api/selectContents.js";
import {Message} from "element-ui";
const state = {
deliveryMthods: [],// 归集方式
};
const getters = {};
const actions = {
//获取归集方式列表信息
getDeliveryMthods({commit, state}) {
selects.getDeliveryMthods(response => {
let data = [];
let obj = {label: '', value: ''}
for (let i = 0; i < response.data.length; i++) {
obj.label = response.data[i].text;
obj.value = response.data[i].key;
data.push(JSON.parse(JSON.stringify(obj)))
}
commit("setDeliveryMthods", data); //归集方式列表信息
});
}
};
const mutations = {
setDeliveryMthods(state, deliveryMthods) {
state.deliveryMthods = deliveryMthods;
}
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
};
三 在vue组件里可以直接使用
<el-form-item label="归集方式:" prop="deliveryMethos">
<el-select
placeholder="请选择"
v-model="cigResCatalogInfo.deliveryMethos"
>
<el-option
v-for="(item,index) in deliveryMthods"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<script>
import req from "@/request.js";
import MixSearch from "@/mixins/mix-search.js";
import {mapState, mapActions} from "vuex";
const cig = req.getContext().cig;
let mixSearch = MixSearch();
export default {
name: "catalogRegister",
computed: mapState({
deliveryMthods: state => state.selectContents.deliveryMthods, //归集方式
}),
</script>