vue中.js文件访问vue示例仓库

重生之我要发颠

于 2024-04-12 16:24:58 发布

阅读量230

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wancaicai_/article/details/137685494

版权

文章讲述了如何在Vue应用中使用Vuex管理状态，包括从store中获取和设置配置表头（如CustomerID、MaskType等下拉选项），以及在表格组件中动态绑定这些表头和数据。

摘要由CSDN通过智能技术生成

声明表头：

import store from '@/store/index'

let customerList = store.state.customerList

let maskTypeList = store.state.maskTypeList

let techList = store.state.techList

let writerList = store.state.writerList

export const configTitleList = [
    {
        label: 'Customer ID',
        prop: 'customerId',
        type: 'select',
        selectList: customerList,
    },
    {
        label: 'Mask Type',
        prop: 'maskType',
        type: 'select',
        selectList: maskTypeList,
    },
    {
        label: 'Description',
        prop: 'description',
        type: 'text',
    },
    {
        label: 'Tech',
        prop: 'tech',
        type: 'select',
        selectList: techList,
    },
    {
        label: 'Writer',
        prop: 'writer',
        type: 'select',
        selectList: writerList,
    },
    {
        label: '更新人',
        prop: 'updateUser'
    },
    {
        label: '更新时间',
        prop: 'updateTime'
    },
]

仓库定义：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user,
    permission,
    enhance,
    online,
    analysis
  },
  state: {
    searchList: [], /** 所有查询条件 */
    customerList: [], /** Customer ID 下拉框可选值 */
    maskTypeList: [], /** Mask Type 下拉框可选值 */
    techList: [], /** Tech 下拉框可选值 */
    writerList: [], /** Writer 下拉框可选值 */
  },
  mutations: {
    /** 请求到所有查询条件 存仓库 */
    setSearchList: (state, payload) => {
      let list = [...payload]
      const customerItem = list.find((item) => item.title === 'Customer Id')
      let _customerList = []
      if (customerItem) {
        _customerList = [..._customerList, ...customerItem.detailList]
      }

      const maskTypeItem = list.find((item) => item.title === 'Mask Type')
      let _maskTypeList = []
      if (maskTypeItem) {
        _maskTypeList = [..._maskTypeList, ...maskTypeItem.detailList]
      }

      const techItem = list.find((item) => item.title === 'Tech')
      let _techList = []
      if (techItem) {
        _techList = [..._techList, ...techItem.detailList]
      }

      const writerItem = list.find((item) => item.title === 'Writer')
      let _writerList = []
      if (writerItem) {
        _writerList = writerItem.detailList
      }

      state.customerList = _customerList
      state.maskTypeList = _maskTypeList
      state.techList = _techList
      state.writerList = _writerList
      state.searchList = payload;
    }
  },
  actions: {

  },
  getters
})

页面使用：

<el-table :data="tableData" border style="width: 100%" height="530">
        <el-table-column
          align="center"
          v-for="(item, index) in titleList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.isInput">
              <div v-if="item.type == 'select'">
                <el-select v-model="scope.row[item.scope]" placeholder="请选择">
                  <el-option v-for="(item, index) in item.selectList" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </div>
              <div v-else-if="item.type == 'text'">
                <el-input v-model="scope.row[item.scope]" placeholder="请输入内容"></el-input>
              </div>
              <div v-else>
                {{ scope.row[item.scope] }}
              </div>
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleUpdataClick(scope.row)">{{
              scope.row.isInput ? '确定' : '修改'
            }}</el-button>
            <el-button type="text" size="small" @click="handleDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


<script>
import { configTitleList } from '../utils/position.js'

data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      tableData: [],
      titleList: configTitleList,
    }
  },
</script>