v3-admin-el

Appearance

v3-table ​

配置式表格组件

用与列表页中的列表数据展示，它是基于配置展示所需数据。拥有自定义 slot、render 渲染、formatter 等功能使其在快速开发的前提下同时拥有极高的可定制能力。支持 el-table 的所有属性

基础用法 ​

自动请求 ​

定义一个数组对象，作为列表列名(columns)，request-api 为列表请求接口，定义后会自动发起请求

注意

使用组件 v3-table，在给 request-api 首次赋值后会自动请求一次；如需要设置查询条件等情况，在设置条件后再赋值 request-api 会自动请求

js
// hooks/useHandle.js

export function useHandle() {
  // 分页查询接口
  const requestApi = ref("api-url");

  // 列表列名
  const columns = [
    { type: "selection", label: "多选" },
    { type: "index", label: "序号", width: "60px" },
    { prop: "jobNo", label: "工号" },
    { prop: "nickName", label: "姓名" },
    { prop: "roleName", label: "角色" },
    { prop: "createAt", label: "创建时间" },
    { slot: "operation", label: "操作" },
  ];

  return {
    columns,
    requestApi,
  };
}
vue
<!-- table.vue -->
<template>
  <div class="tabel-box">
    <v3-table
      ref="tableRef"
      :columns
      :request-api
    />
  </div>
</template>

<script setup name="example-table">
import { useHandle } from "./hooks/useHandle";

const tableRef = ref();
const { searchItems } = useSearch();
const { columns, requestApi } = useHandle();
</script>

手动请求 ​

requestApi已赋值,在需要请求的逻辑中，调用 table 的 tableRef 实例的refresh方法请求

vue
<!-- table.vue -->
<template>
  <div class="tabel-box">
    <v3-table ref="tableRef" />
  </div>
</template>

<script setup name="example-table">
const tableRef = ref();

onMounted(() => {
  tableRef.value.refresh();
});
</script>

获取数据初始化参数 ​

赋值initParam可设置查询默认参数

vue
<template>
  <div class="table-box">
    <v3-table
      ref="tableRef"
      :initParam="{xx:'xx'}"
      :columns
      :request-api
    >
  </div>
</template>

按钮插槽 ​

顶部插槽 ​

#headLeft顶部左侧按钮，#headRight顶部右侧按钮；

vue
<template>
  <div class="tabel-box">
    <v3-table
      ref="tableRef"
      :columns
      :request-api
      :query-columns="searchItems"
    >
      <template #headLeft="{ rows, ids, isSelected }">
        <el-button
          class="btn"
          type="primary"
        >
          左侧按钮
        </el-button>
      </template>
    </v3-table>
  </div>
</template>

列插槽 ​

列按钮需要定义columns中的对象的 slot 属性，slot 的值为插槽名称。

js
// hooks/useHandle.js
const columns = [
  { type: 'selection', label: '多选' },
  { type: 'index', label: '序号', width: '60px' },
  ...
  { slot: "operation", label: "操作" },
];
vue
<template>
  <div class="tabel-box">
    <v3-table
      ref="tableRef"
      :columns
      :request-api="requestApi"
    >
      <template #operation>
        <el-table-column label="操作" width="120px" align="center">
          <template #default="{ row }">
            <el-button type="primary" @click="handleM(row)"> 编辑 </el-button>
          </template>
        </el-table-column>
      </template>
    </v3-table>
  </div>
</template>

render 函数 ​

如果不想使用插槽可选择使用 render 函数, 如下设置绿色的部门名称

js
  const columns = [
    { type: 'selection', label: '多选' },
    { type: 'index', label: '序号', width: '60px' },
    {
      prop: 'departmentName',
      label: '部门',
      render: (h, { row }) => {
        return h('span', { style: { color: '#60D7A7' } }, row.departmentName)
      },
    },
    ...
  ]

筛选条件 ​

传入searchProps属性自动显示查询条件，详情查看下表searchProps

分页参数在hooks/useTable.js中，可以修改state中的listQuery

js
...
  const state = reactive({
    // 页码及每页条数
    listQuery: {
      pageNum: pageRequest.page,
      pageSize: pageRequest.pageSize,
    },
    ...
  })
  ...

赋值searchProps.formatQuery可格式化查询参数

js
export function useSearch() {
    ...
  const formatQuery = (data) => {
    //data为所有的查询条件，此处可随意更改
    data.a = 2;
    data.b = "全部";
    delete data.c
    ...
  };
  ...

   return {
    formatQuery
  };
}
vue
<template>
  <div class="table-box">
    <v3-table
      ref="tableRef"
      :search-props
      :columns
      :request-api
    >
  </div>
</template>

<script setup name="example-table">
import { useSearch } from './hooks/useSearch'
const tableRef = ref()

const searchProps = useSearch()

可折叠搜索框 ​

searchProps传入collapse为true开启折叠功能。defaultOver属性配置是否默认展开；详见下表searchProps

属性 ​

参数说明类型默认值
...支持 el-table 的所有属性...可选
requestApi表格数据接口string必填
columns表格字段（参见上方代码演示）array必填
isMultiple是否可选择多列booleantrue
indexVisible是否显示序号booleantrue
isPagination是否显示分页booleantrue
isOnePage数据只有一页是否显示分页booleanfalse
initParam获取数据初始化参数object{}
formatRequest格式化列表接口返回数据functionnull
searchProps表格查询详见下表searchPropsobjectnull
pageRequest页码与每页条数object{page: 1,pageSize: 10}
pageSizes每页显示个数选择器的选项设置number[] [10, 20, 50, 100, 200, 500]

筛选属性 ​

参数说明类型默认值
collapse是否开启折叠功能booleanfalse
defaultOvercollapse 为 true 生效，搜索栏默认是否折叠booleantrue
formItems查询表单（数组 json）array[]
formatQuery格式化查询参数function(data)null

列属性 ​

注意

列属性支持所有el-table-column属性；如：type, fixed，formatter 等，独有属性如下

参数说明
render支持 rander，h 函数渲染
slot支持插槽，常用于列中操作按钮
isImg支持图片展示

事件 ​

方法名说明类型
rowClick点击行时触发该事件function
rowDblclick双击行时触发该事件function
callBacktable 数据源变化后时触发该事件function

插槽 ​

name说明
headLeft表格上方左侧区域（一般用于展示按钮）
headRight表格上方右侧区域（一般用于展示按钮）
column.slot表格列插槽（定制化列）

Exposes ​

属性说明类型
refresh刷新表单(会重置页码)function
getList请求表单数据function
tableData返回表单数据array
searchReset重置查询条件function
resetSelections清空已选择行function
setTableData手动设置表格数据function

Copyright © 2024 huxc