若依框架前后端分离Vue如何做自定义的组件

若依框架前后端分离Vue如何做自定义的组件

在vue页面中用到了大量的组件，比如选择用户组件，下面咱们自己做一个组件。就拿用户选择组件作为例子。

1、创建组件WmsUserSelect

在vue项目目录src→components→WmsUserSelect目录下创建该组件目录及index.vue文件。

该index.vue文件的详细代码：

<template>
  <el-select placeholder="请选择用户" clearable v-model="customer">
    <el-option
      v-for="customer in userList"
      :key="customer.id"
      :label="customer.nickName"
      :value="customer.userId"
    ></el-option>
  </el-select>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  props: ['value','size'],
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['userList']),
    customer: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input', v);
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

2、userList的配置

这里所说的userList指的是组件WmsUserSelect中的 …mapGetters([‘userList’]),中的关于用户列表配置。

这里用到了store文件夹下的相关文件配置。

2.1、getter.js配置

主要展示与我们例子相关的配置

const getters = {
  // userSelet组件相关
  userList: state => state.wms.userList,
  userMap: state=> state.wms.userMap,
  },

export default getters

2.2 、wms.js配置

主要展示与我们例子相关的配置

import {listUser} from "@/api/system/user";
const state = {
  userList: [],
  userMap: new Map()
}
const mutations = {
  SET_USERS(state, list) {
    state.userList = list;
    state.userMap = new Map();
    list.forEach((user) => {
      state.userMap.set(user.userId, user.nickName)
    })
  },
}
const actions = {
  
  getUser({ commit }) {
    return listUser({}, { page: 0, size: 1000 })
      .then(res => {
        console.log("getUser: ",res);
        const { rows } =res
        commit('SET_USERS', rows);
      })
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2.3、index配置

导入wms.js配置

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
// wms
import wms from './modules/wms'
import dict from './modules/dict'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings,
    dict,
    wms
  },
  getters
})

export default store

3、main.js中配置注册挂载组件

import WmsUserSelect from '@/components/WmsUserSelect'

Vue.component('WmsUserSelect',WmsUserSelect)

4、页面表格中选用该组件

<el-form-item label="测试员" prop="customerId" >
   <WmsUserSelect v-model="form.customerId"></WmsUserSelect>
</el-form-item>

5、效果展示