若依表格(el-table)封装

已于 2024-09-30 16:38:09 修改
阅读量352 收藏 6
点赞数 4
文章标签： vue.js elementui javascript
于 2024-09-30 12:01:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46166771/article/details/142653627
版权

说明：

        本组件是一个基于若依的Vue 3版本和 Element Plus的表格组件，旨在提供灵活且可配置的表格展示方式。它支持加载状态、选择框、多种列类型（如开关、操作按钮和时间格式化），并可以通过 props 进行配置，以满足不同的业务需求（主要解决表格繁琐、代码太多、维护起来不方便的问题，进行代码优化、封装处理）。

代码gitee：git clone https://gitee.com/liu_yu_ting09/ruo_yi.git

备注：实在不想写，gitee上面代码更清晰

一、表格操作说明

  • 加载状态：通过 loading 属性控制加载指示器的显示。
  • 多选功能：通过 selectionShow 属性控制是否显示选择框，便于用户进行批量操作。
  • 动态列配置：根据 columns 属性动态渲染表格列，可以轻松调整列的显示和隐藏。
  • 自定义操作按钮：支持在每行添加操作按钮，便于用户进行编辑、删除等操作。
  • 时间格式化：支持将时间戳格式化为本地字符串显示，使数据更加友好易读。
  • 响应式设计：组件能够适应不同屏幕尺寸，确保良好的用户体验。

二、组件属性说明

属性类型默认值说明
loadingBooleanfalse控制加载状态
dataSourceArray[]表格数据源
columnsArray[]列配置
selectionShowBooleanfalse是否显示选择框

三、事件说明

事件名参数说明
selectionChangeselection: Array当选择变化时触发
statusChangerow: Object当状态变化时触发
actionaction: Object, row: Object当操作按钮被点击时触发

四、支持的列类型

  • 普通文本列：直接显示文本内容。
  • 开关列：使用 <el-switch> 组件，支持状态切换。
  • 操作列：自定义操作按钮，支持多种操作。
  • 时间列：显示格式化后的时间，自动转换为用户本地时间。

JeecgListMixin.js说明

  • additionalParams: (可选) 额外的参数，用于定制化混合函数的行为，例如 API 地址、表单配置等。

返回值

该函数返回一个对象，包含以下属性和方法：

状态变量

  • loading: ref(false) - 表示当前是否正在加载数据的状态。
  • dataSource: ref([]) - 存储从后端获取的数据源，通常用于展示在表格中。
  • total: ref(0) - 表示数据的总条数，用于分页等功能。
  • selectionRows: ref([]) - 用于存储当前选中的行数据，支持多选功能。
  • selectedRowKeys: ref([]) - 存储当前选中行的唯一标识（如 ID），便于后续操作（如删除）。

方法

  • loadData(index): 加载数据的函数，根据传入的 index 参数决定成功提示的消息类型。
  • handleAdd(): 新增按钮的操作，调用模态框中的新增方法。
  • handleUpdate(row): 修改按钮的操作，接收一行数据并调用编辑方法。
  • handleQuery(index): 搜索按钮操作，重置当前页码为1，并根据 index 调用 loadData 加载数据。
  • handleDeleteOne(id): 删除单项操作，确认后调用删除方法删除指定的 ID 项，并在成功后重新加载数据。
  • handleDeleteBatch(index): 批量删除操作，确认后删除选中的多项数据，将选中的行 ID 转换为字符串进行批量删除。
  • handleSelectionChange(selection): 选中事件触发时调用，更新选中行的数据和对应的键值数组。
  • searchReset(): 搜索重置操作，重置搜索表单并重新加载数据。
  • handleExport(url, queryParams, name): 导出操作，接受请求地址、查询参数和文件名称，调用下载方法进行数据导出。

代码模块：若依的用户管理代码

JeecgListMixin.js(文件代码)

import { ref } from "vue";
export const useCommonMixin = (additionalParams) => {///公共参数
  const { list, queryParams, registerModal,deleteOne,proxy,id,queryRef } = additionalParams; //传递过来的公共参数
  const loading = ref(false);//是否加载中
  const selectionRows = ref([]); //选中的数组，用于多选
  const selectedRowKeys = ref([]);//选中的key数组
  const dataSource = ref([]);//数据源
  const total = ref(0);//总条数
  function loadData(index){//加载数据
    loading.value = true;
    list(queryParams.value).then((res) => {
      loading.value = false;
      dataSource.value = res.rows;
      total.value = res.total;
      if(index ==1)proxy.$modal.msgSuccess("查询成功!");
      if(index ==2)proxy.$modal.msgSuccess("重置成功!");
    });
  }
  /** 新增按钮操作 */
  function handleAdd() {
    registerModal.value.add();
  }
  /** 修改按钮操作 */
  function handleUpdate(row) {
    registerModal.value.edit(row);
  }
  /** 搜索按钮操作 */
  function handleQuery(index) {
    queryParams.value.pageNum = 1;
    if(index ==1) return loadData(2);
    loadData(1);
  }
  // /** 一项删除按钮操作 */
  function handleDeleteOne(id) {
    proxy.$modal
      .confirm('是否确认删除这一项吗？')
      .then(function () {
        return deleteOne(id);
      })
      .then(() => {
        loadData();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }
  // 选中事件触发
  function handleSelectionChange(selection) {
    selectionRows.value = selection;
    selectedRowKeys.value = selection.map((item) => item[id]);;
  }
  function handleDeleteBatch(index) {
    if (selectedRowKeys.value.length == 0) return  proxy.$modal.msgWarning("请选择需要删除的数据");;
    let ids = selectedRowKeys
    if(index ==1) ids = selectedRowKeys.value.join(','); //批量删除转化字符串转化
    proxy.$modal
      .confirm(`是否确认批量删除   ${selectedRowKeys.value.length}   条数据？`)
      .then(function () {
        return deleteOne(ids.value);
      })
      .then(() => {
        loadData();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }
  function searchReset(){ //搜索重置
    proxy.resetForm(queryRef);
    handleQuery(1);
  }
  function handleExport(url,queryParams,name) { //导出 --参数 url 请求地址  queryParams 参数名  name 文件名称
    proxy.download(
      url,queryParams,name
    );
  }
  return {
    loading,
    dataSource,
    total,
    loadData,
    handleAdd,
    handleUpdate,
    selectionRows,
    selectedRowKeys,
    handleQuery,
    handleDeleteOne,
    handleSelectionChange,
    handleDeleteBatch,
    searchReset,
    handleExport
  };
};

Table（封装文件）UniversalTable.vue文件和ActionButtons.vue（文件）

<template>
  <div>
    <!-- 表格组件，显示加载状态 -->
    <el-table
      v-loading="loading"
      :data="dataSource"
      @selection-change="handleSelectionChange"
    >
      <!-- 是否显示多选 selectionShow等于 true 显示，否则不显示-->
      <el-table-column
        v-if="selectionShow"
        type="selection"
        width="50"
        align="center"
      />
      <!-- 遍历可见列配置 -->
      <el-table-column
        v-for="item in visibleColumns"
        :key="item.key ? item.key : item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'center'"
        :prop="item.prop"
        :width="item.width"
      >
        <!-- 开关操作 -->
        <template v-if="item.type === 'switch'" v-slot="scope">
          <el-switch
            v-model="scope.row[item.prop]"
            active-value="0"
            inactive-value="1"
            @click="() => handleStatusChange(scope.row)"
          />
        </template>
        <!-- 操作栏 -->
        <template v-if="item.type === 'action'" v-slot="scope">
          <!-- 条件渲染动作按钮组件 -->
          <!--1、 :row="scope.row"    当前行数据 
            2、:actions="item.actions"动作按钮的配置 
            handleAction操作栏按钮的事件  -->
          <ActionButtons
            :row="scope.row"
            :actions="item.actions"
            :onAction="handleAction"
          />
        </template>

        <!-- 时间格式化类型的列 -->
        <template v-if="item.type === 'time'" v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from "vue"; // 导入 ref 和 computed API
import ActionButtons from "./ActionButtons.vue"; // 引入操作按钮组件

const props = defineProps({
  loading: {
    type: Boolean,
    default: false, // 默认不显示加载状态
  },
  dataSource: {
    type: Array,
    default: () => [], // 默认数据源为空数组
  },
  columns: {
    type: Array,
    default: () => [], // 默认列配置为空数组
  },
  selectionShow: {
    type: Boolean,
    default: false, // 默认不显示选择框
  },
});

// 计算可见列，只返回 visible 属性为 true 的列
const visibleColumns = computed(() =>
  props.columns.filter((column) => column.visible)
);

const emit = defineEmits(); // 定义事件发射函数

// 处理选择变化事件
const handleSelectionChange = (selection) => {
  emit("selectionChange", selection); // 触发 selectionChange 事件
};

// 处理状态变更事件
const handleStatusChange = (row) => {
  emit("statusChange", row); // 触发 statusChange 事件
};

// 处理操作按钮事件
const handleAction = (action, row) => {
  emit("action", action, row); // 触发 action 事件
};

// 时间解析函数，格式化时间为本地字符串
const parseTime = (time) => {
  return new Date(time).toLocaleString(); // 将时间转换为本地格式
};
</script>

<template>
  <div>
    <el-button
      v-for="item in actions"
      :key="item.label"
      type="text"
      :icon="item.icon?item.icon:''"
      @click="() => handleAction(item)"
    >
      {{ item.label }}
    </el-button>
  </div>
  
</template>

<script setup>
import { defineProps, defineEmits } from "vue";  // 导入 Vue 的 API

// 定义组件的 props
const props = defineProps({
  row: {
    type: Object,
    default: () => ({}),  // 默认值为空对象
  },
  actions: {
    type: Array,
    default: () => [],    // 默认值为空数组
  },
  onAction: {
    type: Function,
    default: () => (action, row) => {},  // 默认事件处理函数
  }, // 接收事件处理函数
});

// 定义事件发射器
const emit = defineEmits([]);  // 此组件不需要发射任何事件

// 定义处理动作的函数
const handleAction = (action) => {
  if (props.onAction) {  // 检查是否传入了 onAction 函数
    props.onAction(action, props.row); // 调用传入的事件处理函数，并传递动作和行数据
  }
};
</script>

index.vue(主页面代码)

<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              v-hasPermi="['system:user:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="selectedRowKeys.length == 0"
              @click="handleDeleteBatch()" v-hasPermi="['system:user:remove']">批量删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="
              handleExport(
                'system/user/export',
                queryParams,
                `user_${new Date().getTime()}.xlsx`
              )
              " v-hasPermi="['system:user:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData" :columns="columns"></right-toolbar>
        </el-row>
        <UniversalTable :loading="loading" :dataSource="dataSource" :selectionShow="true" :columns="columns"
          @action="handleTableAction" @selectionChange="handleSelectionChange" />
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="loadData" />
      </el-col>
    </el-row>
    <userModal ref="registerModal" @success="loadData" />
  </div>
</template>
<script setup name="customerIntion">
import { listUser, delUser } from "./api/userApi";
const router = useRouter();
const { proxy } = getCurrentInstance();
import { useCommonMixin } from "@/mixins/JeecgListMixin.js"; //公共方法
import userModal from "./components/userModal.vue"; //编辑新增
import UniversalTable from "@/mixins/Table/UniversalTable.vue"; //通用表格
const registerModal = ref();
const showSearch = ref(true);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined,
  },
});
const { queryParams } = toRefs(data);
// 根据需要传入额外参数
const additionalParams = {
  list: listUser, //查询用户列表
  queryParams: queryParams, //查询参数
  registerModal: registerModal, //用户注册编辑对话框
  deleteOne: delUser, //删除用户接口
  proxy: proxy, //公共方法
  id: "userId", //主键id
  queryRef: "queryRef", //查询框ref
};
const {
  loading,               // 是否正在加载数据的状态
  dataSource,           // 存储从后端获取的数据源
  total,                // 数据的总条数，用于分页显示
  loadData,             // 加载数据的函数
  handleAdd,            // 新增操作的处理函数
  handleUpdate,         // 修改操作的处理函数
  handleQuery,          // 查询操作的处理函数
  handleDeleteOne,      // 单项删除操作的处理函数
  handleDeleteBatch,    // 批量删除操作的处理函数
  handleSelectionChange, // 选中行变化时的处理函数
  searchReset,          // 搜索重置的处理函数
  handleExport,         // 数据导出的处理函数
  selectionRows,        // 当前选中的行数据数组
  selectedRowKeys,      // 当前选中行的唯一标识（如 ID）数组
} = useCommonMixin(additionalParams);
const columns = ref([
  { label: "用户编号", prop: "userId", visible: true },
  { label: "用户名称", prop: "userName", visible: true },
  { label: "用户昵称", prop: "nickName", visible: true },
  {
    label: "部门",
    prop: "dept.deptName",
    key: "deptName",
    visible: true,
  },
  { label: "手机号", prop: "phonenumber", visible: true, width: "150" },
  {
    label: "创建时间",
    prop: "createTime",
    type: "time",
    visible: true,
  },
  {
    label: "操作",
    prop: "action",
    visible: true,
    type: "action",
    actions: [
      { label: "修改", icon: "Edit", event: "edit" },
      { label: "删除", icon: "Delete", event: "delete" },
      { label: "详情", icon: "ZoomIn", event: "view" },
    ],
  },
]);
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  searchReset();
}
// 表格事件处理
const handleTableAction = (action, row) => {
  if(action.event =='edit') return handleUpdate(row); //编辑
  if(action.event =='delete') return  handleDeleteOne(row.userId);//删除
  if(action.event =='view') return router.push({ path: "/customerIntionView", query: { pageNum: 10 } }); //详情
};
loadData();
</script>

编辑、新增页面（userModal.vue、userForm.vue）页面代码

<!-- @userModal -->
<template>
  <el-dialog v-model="visible"  :title="title" :width="width">
    <div  v-if="visible">
      <userForm  ref="registerForm" @ok="submitCallback" @onLose="onLose"  />
    </div>
    <template #footer>  <!-- 按钮 -->
      <div class="dialog-footer">
        <el-button type="primary" @click="handleOk" :disabled="disabled">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup >
import { ref, nextTick } from "vue";
import userForm from "./userForm.vue";
const title = ref("");
const width = ref('800');
const visible = ref(false);
const disabled = ref(false);
const registerForm = ref();
const emit = defineEmits(["register", "success"]);
/**
 * 新增
 */
function add() {
  title.value = "新增";
  visible.value = true;
  nextTick(() => {
    registerForm.value.add();
  });
}
/**
 * 编辑
 *
 */
function edit(record) {
  title.value = "编辑";
  visible.value = true;
  nextTick(() => {
    registerForm.value.edit(record);
  });
  
}
/**
 * 确定按钮点击事件
 */
function handleOk() {
  disabled.value = true;
  registerForm.value.submitForm();
}
function onLose() {
 disabled.value = false;
}
/**
 * form保存回调事件
 */
function submitCallback() {
  handleCancel();
  onLose();
  emit("success");
}
/**
 * 取消按钮回调事件
 */
function handleCancel() {
  visible.value = false;
}
defineExpose({
  add,
  edit,
});
</script>


<!-- @userForm.vue -->
<template>
  <el-form :model="formData" :rules="rules" :disabled="disabled" ref="formRef" label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input
            v-model="formData.nickName"
            placeholder="请输入用户昵称"
            maxlength="30"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="归属部门" prop="deptId">
          <el-tree-select
            v-model="formData.deptId"
            :data="deptOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属部门"
            check-strictly
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="formData.phonenumber"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入邮箱"
            maxlength="50"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          v-if="formData.userId == undefined"
          label="用户名称"
          prop="userName"
        >
          <el-input
            v-model="formData.userName"
            placeholder="请输入用户名称"
            maxlength="30"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="formData.userId == undefined"
          label="用户密码"
          prop="password"
        >
          <el-input
            v-model="formData.password"
            placeholder="请输入用户密码"
            type="password"
            maxlength="20"
            show-password
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户性别">
          <el-select v-model="formData.sex" placeholder="请选择">
            <el-option
              v-for="dict in sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :value="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="岗位">
          <el-select v-model="formData.postIds" multiple placeholder="请选择">
            <el-option
              v-for="item in postOptions"
              :key="item.postId"
              :label="item.postName"
              :value="item.postId"
              :disabled="item.status == 1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="角色">
          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.status == 1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
const { proxy } = getCurrentInstance();
import {
  saveOrUpdate,
  deptTreeSelect,
  getUser
} from "../api/userApi";
const { sys_normal_disable, sys_user_sex } = proxy.useDict(
  "sys_normal_disable",
  "sys_user_sex"
);
const emit = defineEmits(["register", "ok"]);
const formRef = ref();
const deptOptions = ref(undefined);
const postOptions = ref([]);
const disabled = ref(false);
const roleOptions = ref([]);
const formData = reactive({
  userId: undefined,
  deptId: undefined,
  userName: undefined,
  nickName: undefined,
  password: undefined,
  phonenumber: undefined,
  email: undefined,
  sex: undefined,
  status: "0",
  remark: undefined,
  postIds: [],
  roleIds: [],
});
//表单验证
const rules = {
  userName: [
    { required: true, message: "用户名称不能为空", trigger: "blur" },
    {
      min: 2,
      max: 20,
      message: "用户名称长度必须介于 2 和 20 之间",
      trigger: "blur",
    },
  ],
  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "用户密码不能为空", trigger: "blur" },
    {
      min: 5,
      max: 20,
      message: "用户密码长度必须介于 5 和 20 之间",
      trigger: "blur",
    },
    {
      pattern: /^[^<>"'|\\]+$/,
      message: "不能包含非法字符：< > \" ' \\\ |",
      trigger: "blur",
    },
  ],
  email: [
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  phonenumber: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
};

/**
 * 新增
 */
function add() {
  edit({});
}
/**
 * 编辑
 */
function edit(record) {
  nextTick(() => {
    //赋值表单数据
    Object.assign(formData, record);
  });
  console.log(formData);
  proxy.resetForm("formRef");
}
/**
 * 提交数据
 */
async function submitForm() {
  disabled.value = true;
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      let model = { ...formData };
      const isUpdate = formData.createTime;
      saveOrUpdate(model,isUpdate).then((res) => {
        disabled.value = false;
        if (res.code ==200) {
          proxy.$modal.msgSuccess(res.msg);
          emit("ok");
        } else {
          emit("onLose");
          proxy.$modal.msgError(res.msg);
        }
      });
    }else{
      disabled.value = false;
      emit("onLose");
    } 
  });
}
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then((response) => { //部门下拉树
    deptOptions.value = response.data;
  });
  getUser().then(response => { //岗位角色
    postOptions.value = response.posts;
    roleOptions.value = response.roles;
  });
} 

getDeptTree();
defineExpose({
  add,
  edit,
  submitForm,
});
</script>

接口文件（userApi.js）代码

import request from '@/utils/request'
import { parseStrEmpty } from "@/utils/ruoyi";

// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

// 查询用户详细
export function getUser(userId) {
  return request({
    url: '/system/user/' + parseStrEmpty(userId),
    method: 'get'
  })
}

// 新增用户
export function addUser(data) {
  return request({
    url: '/system/user',
    method: 'post',
    data: data
  })
}

// 修改用户
export function updateUser(data) {
  return request({
    url: '/system/user',
    method: 'put',
    data: data
  })
}
export function saveOrUpdate(data,isUpdate) {
  const method = isUpdate ? 'put' : 'post';
  return request({
    url: '/system/user',
    method: method,
    data: data
  })
}
// 删除用户
export function delUser(userId) {
  return request({
    url: '/system/user/' + userId,
    method: 'delete'
  })
}

// 用户密码重置
export function resetUserPwd(userId, password) {
  const data = {
    userId,
    password
  }
  return request({
    url: '/system/user/resetPwd',
    method: 'put',
    data: data
  })
}

// 用户状态修改
export function changeUserStatus(userId, status) {
  const data = {
    userId,
    status
  }
  return request({
    url: '/system/user/changeStatus',
    method: 'put',
    data: data
  })
}

// 查询用户个人信息
export function getUserProfile() {
  return request({
    url: '/system/user/profile',
    method: 'get'
  })
}

// 修改用户个人信息
export function updateUserProfile(data) {
  return request({
    url: '/system/user/profile',
    method: 'put',
    data: data
  })
}

// 用户密码重置
export function updateUserPwd(oldPassword, newPassword) {
  const data = {
    oldPassword,
    newPassword
  }
  return request({
    url: '/system/user/profile/updatePwd',
    method: 'put',
    params: data
  })
}

// 用户头像上传
export function uploadAvatar(data) {
  return request({
    url: '/system/user/profile/avatar',
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: data
  })
}

// 查询授权角色
export function getAuthRole(userId) {
  return request({
    url: '/system/user/authRole/' + userId,
    method: 'get'
  })
}

// 保存授权角色
export function updateAuthRole(data) {
  return request({
    url: '/system/user/authRole',
    method: 'put',
    params: data
  })
}

// 查询部门下拉树结构
export function deptTreeSelect() {
  return request({
    url: '/system/user/deptTree',
    method: 'get'
  })
}

My&Liu
关注
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
element的el-table中记录滚动条位置的示例代码
10-16
但是因为项目对el-table进行了二次封装，并且和分页组件结合在了一起，导致直接对`scrollTop`赋值失败。为了解决这个问题，示例中展示了一种可能的解决方案：在`pageChange`方法中，设置滚动条位置时，使用`...
【原创】Ruoyi若依框架微服务架构ExcelUtil扩展——ExcelExtendUtil
lotoze的博客
06-16 4839
因不满足具体工作需求，还有一些bug问题，比如： 1、自定义多级表头 2、灵活的行合并，列合并 3、灵活的单元格背景颜色渲染 所以，根据具体需求，在若依自带的ExcelUtil工具类基础上，新建编写ExcelExtendUtil扩展工具类。具体扩展功能有：
el-table 封装表格（完整代码-实时更新）
CMDN123456的博客
09-06 590
el-table 封装表格（完整代码-实时更新）
vue封装el-table表格组件
qq_42931285的博客
02-19 1348
vue封装el-table表格组件
Element表格（el-table）如何封装
u014197593的博客
12-12 1228
vue2搭配使用的框架基本都是Element-ui，如何开发时每次都过去复制，需要删除一部分，增加一部分，如果碰到的是表单类型的table表格，那更麻烦。因此在符合公司应用场景下面对Element的el-table表格进行了二次封装。
vue2 el-table 封装
weixin_45563734的博客
11-28 1093
vue2 el-table el-pagination 组件封装
封装el-table为可编辑表格
zennnlee的博客
10-30 571
解决：父组件中，可利用 v-if 条件判断，在数据拿回来后，再渲染子组件。提交按钮设置disabled，校验通过才为true。例：子组件中，某个数据依赖父组件发送请求传回的值。（可加上loading防止出现组件区域空白问题）注：直接用prop的值，数据更新正常。
基于el-table封装简单的通用表格组件
Yami__yan的博客
02-09 276
基于el-table 封装简单的通用表格组件
el-table二次封装表格组件
m0_58403721的博客
03-30 1841
基于elementUI中的el-table二次封装组件(动态数据，单选框，开关，操作栏，使用formatter解析部分参数)
如何基于el-table封装一个方便好用的table组件
Ybbb的博客
11-30 6256
之前听到很多人讲在用 element-ui 的 table 组件时，还是自己循环 el-table-column 去实现的！每个页面都这么写想想就头大，另外万一产品要求你项目中所有的表格都要扩展一个功能，比如说按shift，可以实现数据行多选？那岂不是当场傻眼！ 我们完全可以基于el-table去封装一个组件，基于**配置**自动生成表格。
el-table封装（vue2和vue3）
weixin_46899191的博客
06-08 2579
【代码】el-table封装（vue2和vue3）
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 949
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1248
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 989
自定义指令
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1089
vue-live2d看板娘集成方案设计使用教程
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1295
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 647
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
el-table 封装
10-08
el-table是Element UI库中的一个组件，用于展示和操作表格数据。如果你想要封装el-table，可以按照以下步骤进行操作： ...这样，你就将el-table封装到了TableWrapper组件中，并可以通过传递数据和列配置来渲染表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

My&Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值