Vue开发学习笔记:使用vuex实现动态绑定下拉数据(数据库获取)

注:直接在页面中使用双向绑定,会导致下拉字段绑定的下拉数据是相同的

1.表格字段绑定下拉组件

<el-table-column header-align="center" v-for="(colInfo,index) in tableColInfo"
          :fixed="colInfo.isFixed"
          :key="index"
          :prop="colInfo.colName"
          :label="colInfo.colCname"
          :width="getColWidth(colInfo.colName,colInfo.colCname)"
          >
            <!-- 自定义表项/单元格内容 -->
            <template #default="scope">
              <!-- 双击文字或点击修改图标以更改"show"属性 -->
              <!-- scope.row为元数据-->
              <!-- <span
              >
                {{scope.row[colInfo.colName]}}
              </span> -->
              <span
              v-if="scope.row.rowIndex!==lastRowIndex
              &&scope.column.no!==lastColIndex
              &&colInfo.control_type===''"
              >
                {{scope.row[colInfo.colName]}}
              </span>
              <!-- 当控件类型为select控件时绑定 -->
             <my-el-select
              v-if="colInfo.control_type==='el-select'"
              :FORM_NAME="'TestView2'"
              :COL_NAME="colInfo.colName"
              :defauleselectValue="scope.row[colInfo.colName]"
              :getDropDownValues="getSelectData(colInfo.svc_name,colInfo.parameters,colInfo.colName)"
              :disabled = "selectDisable"
              v-model="scope.row[colInfo.colName]"
              ></my-el-select>
              <el-input
                v-if="scope.row.rowIndex===lastRowIndex
                &&scope.column.no===lastColIndex
                &&colInfo.control_type===''"
                v-model="scope.row[colInfo.colName]"
                :ref = "setItemRef"
                @blur="handleInputLosFocus(scope.row,scope.column)"
              />
            </template>
          </el-table-column>

2.编写下拉数据后台获取函数(使用ajax请求)

let lastColName = ' '
    /** 获取绑定下拉组件的下拉数据 */
    const getSelectData = (serviceName, inParameters, colName) => {
      // console.log('传入参数serviceName:', serviceName)
      // console.log('传入参数inParameters:', inParameters)
      console.log('传入参数colName:', colName)
      /** 绑定下拉 */
      if (lastColName !== colName && serviceName !== ' ') {
        axios.post(store.state.url,
          qs.stringify({
            serviceName: serviceName,
            parameters: JSON.stringify(inParameters)
          }, { indices: false })
          , store.state.urlConfig)
          .then((res) => {
            // console.log('成功回调:', res)
            if (res.data[0].returnFlag === 0) {
              // selectOption = res.data[0].Table1
              // defaultOptions.value = res.data[0].Table1
              store.commit('SetDropDownListValues', { colName: colName, values: res.data[0].Table1 })
              console.log('小代码查询结果:', res.data[0].Table1)
            } else {
              ElMessage({
                showClose: true,
                message: res.data[0].returnMsg,
                type: 'error',
                center: true
              })
            }
          })
          .catch((err) => {
            console.log('失败回调:', err)
          })
        lastColName = colName
      }
    }

3.自定义组件Myselect

<template>
  <el-select v-model="selectValue" placeholder=" " :disabled="isDisabled"
  @change = "selectChange">
    <el-option :value="''" disabled>
        <el-row :gutter="30">
        <el-col :span="12">代码</el-col>
        <el-col :span="12">描述</el-col>
    </el-row>
    </el-option>
    <el-option :value="''">
    </el-option>
    <el-option
      v-for="item in optionData"
      :key="item.ITEM_CODE"
      :label="item.ITEM_CODE_DESC1"
      :value="item.ITEM_CODE"
    >
    <el-row  :gutter="30">
        <el-col :span="12">{{ item.ITEM_CODE }}</el-col>
        <el-col :span="12">{{ item.ITEM_CODE_DESC1 }}</el-col>
    </el-row>
    </el-option>
  </el-select>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import axios from 'axios'
import { useStore } from 'vuex'
// eslint-disable-next-line no-unused-vars
import qs from 'qs'
// eslint-disable-next-line no-unused-vars
import ElMessage from 'element-plus'
import { ref, watchEffect } from 'vue'
export default {
  name: 'myElSelect',
  props: [
    'SVC_NAME',
    'PARM_NAME',
    'PARM_VALUE',
    'FORM_NAME',
    'COL_NAME',
    'defauleselectValue',
    'defaultOptions',
    'disabled'
  ],
  setup (props, context) {
    /** 定义全局变量管理器 */
    const store = useStore()
    /** 组件下拉选项数据 */
    const optionData = ref([{ ITEM_CODE: '', ITEM_CODE_DESC1: '' }])
    /** 选中值(初始化时为默认值) */
    // eslint-disable-next-line vue/no-setup-props-destructure
    const selectValue = ref(' ')
    /** 是否禁用 */
    const isDisabled = ref(false)
    watchEffect(() => {
      if (props.disabled !== undefined) {
        isDisabled.value = props.disabled
        // console.log('props.disabled:', props.disabled)
      }
      if (props.COL_NAME !== undefined) {
        optionData.value = store.state.DropDowmList_values[props.COL_NAME]
        // console.log('props.disabled:', props.disabled)
      }
      if (props.defauleselectValue !== undefined && props.defauleselectValue !== ' ') {
        // console.log('传入属性值改变触发selectValue:', props.defauleselectValue)
        selectValue.value = props.defauleselectValue
      }
    })
    /** 选项值发生改变时触发 */
    const selectChange = (value) => {
      // console.log('选项值改变触发selectValue:', selectValue)
      store.commit('SetFormAttrInfo', { formName: props.FORM_NAME, attrName: 'el-select-Value', attrValue: selectValue.value })
    }
    return {
      selectChange,
      optionData,
      selectValue,
      isDisabled
    }
  }
}
</script>

4.vuex中定义变量(用于保存每次查询出来的字段的下拉数据)

import { createStore } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { ref, toRefs, toRaw, reactive, markRaw, toRef } from 'vue'
// import qs from 'qs'

export default createStore({
  state: {
    /** 菜单相关信息 */
    menuItemInfo: { ItemModule: [], ItemForm: [] },
    /** 数据库链接请求头配置 */
    urlConfig: {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    },
    /** 数据表相关信息 */
    formInfo: {},
    /** select组件是否禁用 */
    selectValue: true,
    DropDowmList_values: {}
  },
  getters: {
  },
  mutations: {
    SetMenuItemInfo (state, parame) {
      state.menuItemInfo.ItemModule = parame[0]
      state.menuItemInfo.ItemForm = parame[1]
    },
    /** 设置画面属性 */
    SetFormAttrInfo (state, FormInfo) {
      // 先在formInfo创建一个属性为formInfo.formName的空对象,就是画面对象
      if (state.formInfo[FormInfo.formName] === undefined) {
        state.formInfo[FormInfo.formName] = { }
      }
      // 然后将画面对象要添加的属性添加到对应的画面对象中
      if (FormInfo.attrName !== undefined) {
        state.formInfo[FormInfo.formName][FormInfo.attrName] = FormInfo.attrValue
      }
      // console.log('动态添加formTableInfo的属性名称:', state.formInfo)
    },
    SetDropDownListValues (state, dropdownValuesInfo) {
      if (state.DropDowmList_values[dropdownValuesInfo.colName] === undefined) {
        state.DropDowmList_values[dropdownValuesInfo.colName] = dropdownValuesInfo.values
      } else if (state.DropDowmList_values[dropdownValuesInfo.colName] !== undefined) {
        state.DropDowmList_values[dropdownValuesInfo.colName] = dropdownValuesInfo.values
      }
    }
  },
  actions: {
    // changeItemInfo () {
    //   console.log('准备更改menuIteminfo的值')
    // }
  },
  modules: {
  }
})

效果图: