【vue】封装接口，全局字典，表格表头及使用

news2025/5/17 8:17:33

一、封装接口（API请求）

1. 创建axios实例

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(config => {
  config.headers['Authorization'] = getToken()
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

export default service

2. 模块化接口管理

// src/api/user.js
import request from '@/utils/request'

export function getUserList(params) {
  return request.get('/users', { params })
}

export function updateUser(data) {
  return request.post('/users/update', data)
}

3. 组件中使用

import { getUserList } from '@/api/user'

export default {
  methods: {
    async fetchData() {
      try {
        const res = await getUserList({ page: 1 })
        this.list = res.data
      } catch (err) {
        console.error(err)
      }
    }
  }
}

二、封装全局字典

1. 字典定义文件

// src/utils/dict.js
export const DICT = {
  status: [
    { value: 1, label: '启用' },
    { value: 0, label: '禁用' }
  ],
  gender: [
    { value: 1, label: '男' },
    { value: 2, label: '女' }
  ]
}

// 字典转换方法
export const formatDict = (value, dictType) => {
  const target = DICT[dictType].find(item => item.value === value)
  return target ? target.label : '未知'
}

2. 全局注入字典

// main.js
import { DICT, formatDict } from '@/utils/dict'

Vue.prototype.$dict = DICT
Vue.prototype.$formatDict = formatDict

3. 组件中使用

<template>
  <div>
    <!-- 直接访问字典 -->
    <el-select v-model="status">
      <el-option 
        v-for="item in $dict.status"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <!-- 格式化显示 -->
    <span>{{ $formatDict(userStatus, 'status') }}</span>
  </div>
</template>

三、封装通用表格表头

1. 创建可配置表格组件

<!-- src/components/CommonTable.vue -->
<template>
  <el-table :data="tableData">
    <el-table-column 
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
      :width="col.width"
      :sortable="col.sortable || false"
    >
      <template v-slot="{ row }">
        <!-- 自定义格式化 -->
        <template v-if="col.formatter">
          {{ col.formatter(row[col.prop]) }}
        </template>
        
        <!-- 自定义插槽 -->
        <slot v-else-if="col.slotName" :name="col.slotName" :row="row"/>
        
        <!-- 默认显示 -->
        <span v-else>{{ row[col.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

2. 使用配置式表头

// 在组件中定义表头配置
const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: 120
  },
  {
    prop: 'status',
    label: '状态',
    formatter: value => this.$formatDict(value, 'status')
  },
  {
    prop: 'action',
    label: '操作',
    slotName: 'action' // 使用插槽自定义内容
  }
]

3. 父组件中使用

<template>
  <CommonTable :columns="columns" :table-data="list">
    <!-- 自定义操作列 -->
    <template #action="{ row }">
      <el-button @click="edit(row)">编辑</el-button>
    </template>
  </CommonTable>
</template>

<script>
import CommonTable from '@/components/CommonTable'

export default {
  components: { CommonTable },
  data() {
    return {
      columns: [...],
      list: [...]
    }
  }
}
</script>