You编程__封装ElementPlus通用组件（会持续更新...）

YOU编程__封装ElementPlus通用组件（会持续更新…）

1、通用表格组件

• CommonTable.vue

<template>
  <div>
    <el-form :model="query" inline class="query-form">
      <el-form-item>
        <el-input v-model="query.keyword" placeholder="请输入关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" class="data-table">
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  columns: {
    type: Array,
    required: true
  },
  data: {
    type: Array,
    required: true
  },
  total: {
    type: Number,
    required: true
  }
})

const emits = defineEmits(['query', 'add', 'pageChange', 'edit', 'delete'])

const query = ref({
  keyword: ''
})

const tableData = ref(props.data)
const totalRecords = ref(props.total)

watch(() => props.data, (newData) => {
  tableData.value = newData
})

const handleQuery = () => {
  ElMessage.success('查询功能触发')
  emits('query', query.value)
}

const handleAdd = () => {
  ElMessage.success('添加功能触发')
  emits('add')
}

const handleEdit = (row) => {
  ElMessage.success('修改功能触发')
  emits('edit', row)
}

const handleDelete = (row) => {
  ElMessage.success('删除功能触发')
  emits('delete', row)
}

const handlePageChange = (page) => {
  ElMessage.success(`当前页: ${page}`)
  emits('pageChange', page)
}
</script>

<style>
.query-form{
  margin-top: 20px;
}
.data-table{
  width: 100%;
  margin: 0px 0px 20px 0px;
}
</style>

• 使用示例

<template>
  <div>
    <CommonTable
        :columns="columns"
        :data="tableData"
        :total="total"
        @query="handleQuery"
        @add="handleAdd"
        @edit="handleEdit"
        @delete="handleDelete"
        @pageChange="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CommonTable from '@/components/CommonTable.vue'

const columns = ref([
  { prop: 'name', label: '名称' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' }
])

const tableData = ref([
  { name: 'John Doe', age: 30, address: 'New York' },
  { name: 'Jane Doe', age: 25, address: 'Los Angeles' }
])

const total = ref(50)  // 假设总记录数为50

const handleQuery = (query) => {
  console.log('查询条件:', query)
  // 在这里添加查询逻辑
}

const handleAdd = () => {
  console.log('触发添加功能')
  // 在这里添加添加逻辑
}

const handleEdit = (row) => {
  console.log('修改行:', row)
  // 在这里添加修改逻辑
}

const handleDelete = (row) => {
  console.log('删除行:', row)
  // 在这里添加删除逻辑
}

const handlePageChange = (page) => {
  console.log('当前页:', page)
  // 在这里添加分页逻辑
}
</script>

2、request统一封装

import axios from 'axios';
axios.defaults.withCredentials = true; //允许cookie的携带
let baseUrl = "http://localhost:1998";
const httpService = axios.create({
    baseURL: baseUrl,
    timeout: 3000 // 超时时间
});

// 添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {
    // 在发送请求之前都带上token
    config.headers.token = window.sessionStorage.getItem('token');
    return config;
}, function (error) {
    // 请求错误
    return Promise.reject(error);
});

// 添加响应拦截器
httpService.interceptors.response.use(function (response) {
    // 响应数据
    return response;
}, function (error) {
    // 响应错误
    return Promise.reject(error);
});

/**
 * 统一请求方法
 * @param {string} method 请求方法类型：'get', 'post', 'delete', 'upload'
 * @param {string} url 请求地址
 * @param {Object} params 请求参数
 * @returns {Promise} 返回Promise对象
 */
export function request(method, url, params = {}) {
    let config = {
        url: url,
        method: method
    };

    if (method === 'get') {
        config.params = params;
    } else if (method === 'post' || method === 'delete' || method === 'upload') {
        config.data = params;
        if (method === 'upload') {
            config.headers = { 'Content-Type': 'multipart/form-data' };
        }
    }

    return new Promise((resolve, reject) => {
        httpService(config)
            .then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
}

export function getServerUrl() {
    return baseUrl;
}

export default {
    request,
    getServerUrl
};