通用表格前端组件包

更新日志

2024-05-31 新增控制表格列的显示与隐藏 配置 tableShow:'hide'即可不显示
2024-06-17 增加可配置表格查询的返回码和返回结构值，主要是适配单体项目
2024-08-02  表格增加可配置默认选中行
2024-08-13  增加自定义表格操作列默认样式方法 iwater_easytable_opt_btn
2024-08-21 增加是否第一次加载执行接口

使用方式

1. 安装 yarn add iwater-easytable
2. 在main.js 全局注册
   import iwaterEasyTable from "iwater-easytable";
   import "iwater-easytable/style.css";
   app.use(iwaterEasyTable)
3. <iwaterEasyTable 
    ref="easyTableRef" 
    v-bind="tableConfig"
    @handleClick="handleClick">		
    </iwaterEasyTable>

使用说明

全局注册完毕之后，可在vue页面直接使用组件

<iwaterEasyTable ref="easyTableRef" v-bind="tableConfig" @handleClick="handleClick">	
</iwaterEasyTable>

tableConfig基本配置说明

import { http } from '@/axios/index' // 引入封装好的http--微服务那套
const selectionDefault = (item) => {
  return item.username === 'bobo'; // 如果username等于bobo，返回true默认会选中，否则返回false
};
const tableConfig = {
    isFirstload:false,// false 不自动调用接口 true 自动调用接口
    selectionDefault: selectionDefault, // 自定义表格选中行事件，传递条件即可
    httpService:http, // 配置表格封装的http请求
    border: true, // 配置表格边框，默认不显示 false
    showPager: false ,//  配置是否显示底部分页组件，默认显示分页 true
    rowKey: 'userId', // 表格行数据唯一key值，经常用来指定删除接口的参数key,默认是id
    selection: false, // 配置是否显示多选框，默认不显示 false
    tabIndex:true, // 配置是否显示序号 默认不显示 false
    currentConfig: { // 配置分页参数----当前页面参数
        filed: 'pageNo', // 支持自定义分页的参数key，默认是current，有的可能是page,根据后端接口返回而定
        value: 1, // 支持自定义默认查询第几页数据
    },
    sizeConfig: {  // 配置分页参数----每页显示多少条
        filed: 'pageSize', // 支持自定义分页的参数key,默认是size，有的可能是pageSize,根据后端接口返回而定
        value: 10 // 支持自定义每页显示条数
    },
    pageSizesConfig: [10, 50, 100, 150, 500], // 支持自定义分页切换数组设置
    dataUrl: {
        // 分页查询接口配置
        get: { 
        url: '/silt-dam-lanzhou-user/user/queryBySome',  // 接口地址
        method: 'post', // 指定请求方式
        exParam: {}, // 可配置额外的接口所需参数
        config: {}, // 可配置额外的接口所需参数
        successCode: 0,// 可配置返回的code成功码
        listKey: 'list' // 可配置list 的key取值
        },
        // 删除接口配置
        delete: { 
        url: '/silt-dam-lanzhou-user/user/delete',// 接口地址
        method: 'post', // 指定请求方式
        config: { // 可配置请求头 或者返回的头的对应参数
            headers: {
            ' Content-Type': 'application/x-www-form-urlencoded'
            }
        },
        exParam: {} // 可配置额外的接口所需参数
        }
   },
  // 表格内容配置
  columnConfig: [
    {
      label: '用户ID', // 列的header名称
      field: 'userId', // 列对应的字段
      width: '100px', // 列的宽度
      align: 'center', // 列的对齐方式
      fixed: 'left', // 列的固定位置
      sortable: true, // 列是否可排序
      minWidth: '100px', // 列的最小宽度
      tableShow:'hide', // 表格中隐藏本列，不显示，默认不配置，显示
      styleCell: {color: 'red'} // 设置单元格的样式
    },
    {
      label: '是否禁用', // 列的header名称
      field: 'enabled', //列对应的字段
      // key-value转化--比如后端给你返回的是1 ，而你想显示为启用，可以使用此方法
      changeLable: [ 
        {
          label: '启用',
          value:1
        },
        {
          label: '禁用',
          value:0
        }
      ]
    },
    // 自定义插槽内容--在iwaterEasyTable 组件内部写具名插槽  v-slot:col-加上field组成的名字
    // scope.row.roles 是拿到的本行数据的roles
    // <template v-slot:col-roles="scope"> 这里拿到数据可以自定义处理了</template>
    {
        label: '角色', // 列的header名称
        field: 'roles', // 列对应的字段
        tableSlot: true, // 开启具名插槽
    },
  ],
  operateConfig: { // 配置最右侧的操作列，不写operateConfig，则不显示操作列
    fixed: 'right', // fixed固定方向，默认右侧固定
    align: 'center', // 操作列的对齐方式，默认居中
    label: '操作',
    width: '200',
    btList: [
        {
            label: '删除', // 内置删除
            event: 'delete', // 内置delete 会执行组件内部默认的删除方法
        },
        {
            label: '修改密码', // 样式保持不变，也支持自定义按钮名称和事件来类型，捕获当前按钮事件可使用handleClick统一捕获
            event: 'updatePassword',
        },
        // 自定义插槽内容--在iwaterEasyTable 组件内部写具名插槽 ， v-slot:handle-加上event的类型组成的名字
        //  <template v-slot:handle-updateUser="scope"> 自定义操作列按钮 </template>
        {
            label: '编辑',
            event: 'updateUser',
            slot: true, // 开启插槽自定义，自定义当前按钮的全部内容，通过用于样式的特殊改变
        },
    ]
  },
}

可以通过ref 绑定，调用本组件方法

  easyTableRef.value.refreshTabel(loadParams, reset)
  // 这个方法可以在父组件传递外部参数，用于数据列表查询;
  //loadParams 是参数对象，reset代表是否重置分页参数，一般用于搜索，都需要重置
  const searchTable = () => {
    easyTableRef.value.refreshTabel({
      name: searchUser.value,
      roleName: searchRole.value
    }, 'reset')
  }

@handleClick="handleClick"

// 可以通过此方法拿到组件的事件类型和数据
const handleClick = (event, data) => {
  console.log('事件类型 :>> ', event);
  console.log('当前数据 :>> ', data);
  switch (event) {
    case 'updateUser': // 捕获自定的事件了类型
      break;
    case 'selectionChange': // 多选时间类型，从这可拿到多选框的row数组
      break;
    default:
      break;
  }
}

全局更改表格操作列样式的方式

.iwater_easytable_opt_btn{
  color: $base-color-default!important;
}