DdTable 组件使用文档

组件介绍

DdTable 是一个基于 Element UI 的表格组件，提供了更丰富的功能和更灵活的配置选项。它支持响应式设计，可以在移动端和桌面端提供不同的展示方式，并集成了权限控制、操作按钮和自定义插槽等功能。

基本用法

<template>
  <dd-table
    :list="list"
    :total="total"
    :list-loading="listLoading"
    :columns="tableColumns"
    :list-query="filterInfo.data"
    @getList="getList"
    @handleSelectionChange="handleSelectionChange"
    @handleSortChange="handleSortChange"
  />
</template>

属性说明

基础属性

属性名	类型	默认值	说明
list	Array	[]	表格数据源
total	Number	0	数据总条数
listLoading	Boolean	true	加载状态
columns	Array	[]	表格列配置
listQuery	Object	{ page: 1, pageSize: 20 }	分页查询参数
showSelection	Boolean	false	是否显示多选框
showIndex	Boolean	false	是否显示序号列
isDialog	Boolean	false	是否在弹窗中使用
pageSizes	Array	[20, 50, 100]	每页显示条数选项
auth	Object	{}	权限控制对象
operMenuBtns	Array	[]	操作按钮配置
showExcelExport	Boolean	true	是否显示导出按钮
showExcelImport	Boolean	false	是否显示导入按钮
handleSelectionChange	Function	-	选择变化事件处理函数
handleSortChange	Function	-	排序变化事件处理函数

列配置说明 (columns)

const columns = [
  {
    label: '列标题',
    prop: '字段名',
    width: '列宽度',
    slot: '插槽名', // 使用插槽时配置
    sortable: true/false, // 是否可排序
    fixed: 'left/right', // 固定列位置
    minWidth: '最小宽度', // 最小宽度
    align: 'left/center/right', // 对齐方式
    headerAlign: 'left/center/right' // 表头对齐方式
  }
]

事件

事件名	说明	回调参数
getList	获取列表数据	分页参数
handleSelectionChange	多选变化	选中的数据
handleSortChange	排序变化	排序参数
handleTableCol	点击单元格	row, index

插槽使用

组件支持通过插槽自定义列内容，常用于格式化显示、添加操作按钮或复杂内容展示：

基本用法

<dd-table :columns="columns">
  <template slot="customSlot" slot-scope="{ row, index }">
    <!-- 自定义列内容 -->
    <div>{{ row.someField }}</div>
  </template>
</dd-table>

实际应用示例

1. 带tooltip的多内容展示

<template slot="follower_name" slot-scope="{ row }">
  <el-tooltip :content="row.follower_name.split(',').slice(1).join(',')" placement="top" v-if="row.follower_name.includes(',')">
    <span style="cursor: pointer">{{ row.follower_name.split(",")[0] }}</span>
  </el-tooltip>
  <span v-else>{{ row.follower_name }}</span>
</template>

2. 长文本内容折叠与弹窗展示

<template slot="last_opportunity" slot-scope="{ row }">
  <div class="remark-container">
    <div v-if="typeof row.last_opportunity === 'string' && row.last_opportunity.length <= 30">
      {{ row.last_opportunity }}
    </div>
    <el-popover v-else placement="top-start" width="400" trigger="hover" :content="row.last_opportunity">
      <div slot="reference" class="remark-content">
        {{ row.last_opportunity ? (typeof row.last_opportunity === 'string' ? row.last_opportunity.length > 20 ? row.last_opportunity.substring(0, 100) + '...' : row.last_opportunity : String(row.last_opportunity)) : '' }}
      </div>
    </el-popover>
  </div>
</template>

3. 操作按钮列

<template slot="action" slot-scope="{ row, index }">
  <div :auth="auth.delete" content="删除">
    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确认删除吗?" @confirm="deleteRow(row, index)">
      <dd-button slot="reference" :auth="auth.delete" content="删除" type="danger" size="mini" icon="el-icon-delete" circle></dd-button>
    </el-popconfirm>
  </div>
</template>

插槽命名规范：插槽名称应与columns配置中的slot属性值保持一致，slot-scope提供row（当前行数据）和index（行索引）参数

操作按钮配置

dd-table 支持通过 operMenuBtns 属性配置表格顶部的操作按钮，包括按钮权限控制、图标和点击事件处理。

配置示例

operMenuBtns: [
  {
    name: "变更跟进人",
    type: "primary",
    icon: "el-icon-user",
    auth: auth.bglxr,
    handleClick: this.handleChangeFollower,
  },
  {
    name: "释放",
    type: "danger",
    icon: "el-icon-delete",
    auth: auth.sf,
    handleClick: this.handleRelease,
  },
  {
    name: "删除",
    type: "danger",
    icon: "el-icon-delete",
    auth: auth.deletes,
    handleClick: this.handleDeleteAll,
  },
]

参数说明

参数	类型	说明
name	String	按钮名称
type	String	按钮类型（primary/danger/success/warning/info）
icon	String	按钮图标（Element UI图标类名）
auth	Boolean	权限控制标志，控制按钮是否显示
handleClick	Function	点击事件处理函数

权限控制

组件通过 auth 属性实现基于权限的功能控制，可用于控制按钮显示、操作权限等。

使用示例

<!-- 控制按钮显示 -->
<dd-button :auth="auth.delete" content="删除" type="danger" size="mini" icon="el-icon-delete" circle></dd-button>

<!-- 控制操作列显示 -->
<template slot="action" slot-scope="{ row, index }">
  <div :auth="auth.delete" content="删除">
    <!-- 操作内容 -->
  </div>
</template>

事件处理

dd-table 提供了丰富的事件接口，用于处理表格交互和数据操作：

事件名	说明	回调参数
@getList	获取列表数据	分页参数
@handleSelectionChange	多选变化	选中的数据
@handleSortChange	排序变化	排序参数
@handleCreate	创建按钮点击	-
@handleDeleteAll	批量删除点击	选中的IDs
@handleImport	导入按钮点击	-
@handleEvent	通用事件处理	事件名称和参数

移动端适配

组件会自动检测设备类型，在移动端使用 el-descriptions 组件展示数据，提供更好的移动端体验。

样式定制

组件提供了多个 CSS 类名用于样式定制：

.complex-table_container: 表格容器
.complex-table_container_dialog: 弹窗中的表格容器
.table-main: 表格主体
.pagination-container: 分页容器
.pagination-container-dialog: 弹窗中的分页容器

使用示例

基础表格

<template>
  <fire-table
    :list="tableData"
    :total="total"
    :columns="[
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' },
      { label: '地址', prop: 'address' }
    ]"
    @getList="handleGetList"
  />
</template>

带操作列的表格

<template>
  <fire-table
    :list="tableData"
    :total="total"
    :columns="columns"
    :handle="[
      {
        label: '编辑',
        method: handleEdit
      },
      {
        label: '删除',
        isPop: true,
        method: handleDelete
      }
    ]"
  />
</template>

自定义列内容

<template>
  <fire-table :columns="columns">
    <template slot="status" slot-scope="{ row }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </el-tag>
    </template>
  </fire-table>
</template>

注意事项

使用插槽时，需要在 columns 配置中指定 slot 属性
在弹窗中使用时，设置 isDialog 为 true 可以获得更好的展示效果
表格高度会自动适应容器高度，在弹窗中会自动计算合适的高度
移动端会自动切换为更适合移动端查看的展示方式

最佳实践

对于需要自定义渲染的列，使用插槽方式
需要固定列时，使用 fixed 属性
需要排序功能时，设置 sortable: true
在弹窗中使用时，记得设置 isDialog: true
使用 showSelection 和 showIndex 控制是否显示多选框和序号列