ant-design-vue-pro中的高级表格：自定义单元格与编辑功能实现-优快云博客

ant-design-vue-pro中的高级表格：自定义单元格与编辑功能实现

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

在企业级后台管理系统开发中，表格是数据展示与交互的核心组件。ant-design-vue-pro提供的高级表格组件不仅支持基础的数据展示，还内置了强大的自定义单元格渲染和编辑功能，能够满足复杂业务场景需求。本文将从实际应用角度，详细介绍如何在ant-design-vue-pro项目中实现表格的自定义单元格与编辑功能。

高级表格基础架构

ant-design-vue-pro的表格组件基于Ant Design Vue的Table组件进行了二次封装，位于src/components/Table/index.js。该组件提供了标准化的数据加载、分页、排序和筛选功能，并支持自定义列渲染和编辑操作。

表格组件的核心属性包括：

columns：定义表格列配置，支持自定义渲染
data：数据源加载函数，返回Promise对象
rowSelection：行选择配置，支持单选和多选
alert：选中状态提示配置

基础使用示例可参考src/views/list/table/List.vue，该文件实现了一个包含搜索、分页和操作列的完整表格页面。

自定义单元格实现

自定义单元格是表格组件的核心功能之一，允许开发者根据数据特点定制单元格展示形式。在ant-design-vue-pro中，有两种主要方式实现自定义单元格渲染。

使用scopedSlots自定义渲染

通过在columns配置中定义scopedSlots属性，可以将单元格内容绑定到自定义插槽。例如，在src/views/list/table/List.vue中，序号列和操作列均使用了自定义插槽：

columns: [
  {
    title: '#',
    scopedSlots: { customRender: 'serial' }
  },
  // 其他列配置...
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

对应的模板中定义插槽内容：

<s-table
  ref="table"
  size="default"
  rowKey="key"
  :columns="columns"
  :data="loadData"
  :alert="options.alert"
  :rowSelection="options.rowSelection"
>
  <span slot="serial" slot-scope="text, record, index">
    {{ index + 1 }}
  </span>
  <span slot="action" slot-scope="text, record">
    <template>
      <a @click="handleEdit(record)">编辑</a>
      <a-divider type="vertical" />
    </template>
    <!-- 更多操作... -->
  </span>
</s-table>

使用customRender函数

对于简单的自定义渲染需求，可以直接在columns配置中使用customRender函数：

{
  title: '服务调用次数',
  dataIndex: 'callNo',
  sorter: true,
  needTotal: true,
  customRender: (text) => text + ' 次'
}

这种方式适用于简单的文本格式化，如添加单位、状态转换等场景。

编辑功能实现

ant-design-vue-pro的表格编辑功能主要通过模态框(Modal)实现，结合表单组件完成数据编辑。以下是完整的实现流程：

1. 编辑按钮与事件绑定

在操作列中添加编辑按钮，并绑定点击事件：

<span slot="action" slot-scope="text, record">
  <a @click="handleEdit(record)">编辑</a>
  <!-- 其他操作... -->
</span>

2. 编辑方法实现

在src/views/list/table/List.vue中实现handleEdit方法，打开编辑模态框：

methods: {
  handleEdit (record) {
    this.$emit('onEdit', record)
    // 实际项目中通常会打开编辑模态框
    // 例如：this.$refs.modalForm.show(record)
  }
}

3. 编辑表单实现

编辑表单通常使用Ant Design Vue的Modal和Form组件实现，可参考src/views/list/modules/Edit.vue（注：该文件在当前项目结构中未显示，实际项目中可创建类似组件）。典型的编辑表单结构如下：

<a-modal
  title="编辑数据"
  :visible="visible"
  :confirm-loading="confirmLoading"
  @ok="handleOk"
  @cancel="handleCancel"
>
  <a-form :form="form">
    <a-form-item
      label="规则编号"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 15 }"
    >
      <a-input v-decorator="['no', { rules: [{ required: true, message: '请输入规则编号' }] }]" />
    </a-form-item>
    <!-- 其他表单项... -->
  </a-form>
</a-modal>

4. 数据加载与保存

编辑表单的数据加载和保存逻辑：

methods: {
  // 显示编辑框并加载数据
  show (record) {
    this.visible = true
    this.record = record
    if (record && record.key) {
      // 加载已有数据
      this.form.setFieldsValue(this.record)
    } else {
      // 新增时重置表单
      this.form.resetFields()
    }
  },
  
  // 保存编辑数据
  handleOk () {
    this.form.validateFields((err, values) => {
      if (!err) {
        this.confirmLoading = true
        // 调用API保存数据
        saveData(values)
          .then(() => {
            this.$message.success('保存成功')
            this.visible = false
            this.confirmLoading = false
            // 通知表格刷新数据
            this.$emit('ok')
          })
          .catch(() => {
            this.confirmLoading = false
          })
      }
    })
  }
}

高级应用场景

批量操作实现

ant-design-vue-pro的表格组件支持通过rowSelection属性实现批量选择功能，结合顶部提示条展示选中状态：

options: {
  alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
  rowSelection: {
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.onSelectChange
  }
}

选中状态变化时的处理方法：

methods: {
  onSelectChange (selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
}

批量操作通常通过下拉菜单实现：

<a-dropdown v-if="selectedRowKeys.length > 0">
  <a-menu slot="overlay">
    <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
    <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
  </a-menu>
  <a-button style="margin-left: 8px">
    批量操作 <a-icon type="down" />
  </a-button>
</a-dropdown>

数据统计功能

表格组件支持对选中数据进行统计，通过设置列的needTotal: true属性开启：

columns: [
  {
    title: '服务调用次数',
    dataIndex: 'callNo',
    sorter: true,
    needTotal: true,
    customRender: (text) => text + ' 次'
  }
]

统计功能在src/components/Table/index.js中实现，通过updateSelect方法计算选中数据的总和：

updateSelect (selectedRowKeys, selectedRows) {
  this.selectedRows = selectedRows
  this.selectedRowKeys = selectedRowKeys
  const list = this.needTotalList
  this.needTotalList = list.map(item => {
    return {
      ...item,
      total: selectedRows.reduce((sum, val) => {
        const total = sum + parseInt(get(val, item.dataIndex))
        return isNaN(total) ? 0 : total
      }, 0)
    }
  })
}

实际应用示例

以下是一个完整的高级表格应用场景，展示了自定义单元格和编辑功能的综合应用：

表格页面布局

自定义状态列实现

通过自定义单元格实现状态标签展示：

{
  title: '状态',
  dataIndex: 'status',
  needTotal: true,
  scopedSlots: { customRender: 'status' }
}

<span slot="status" slot-scope="text">
  <a-tag v-if="text === 1" color="red">关闭</a-tag>
  <a-tag v-else color="green">运行中</a-tag>
</span>

编辑功能流程

点击表格中的"编辑"按钮
打开编辑模态框，加载当前数据
修改数据并提交
提交成功后刷新表格数据

总结

ant-design-vue-pro的高级表格组件通过自定义单元格和编辑功能，为企业级应用提供了强大的数据展示和交互能力。核心要点包括：

使用scopedSlots实现复杂自定义单元格
使用customRender函数实现简单文本格式化
通过模态框和表单组件实现编辑功能
利用rowSelection和alert实现批量操作

完整的实现示例可参考项目中的src/views/list/table/List.vue文件，开发者可根据实际需求进行扩展和定制。

掌握这些技能后，您可以构建出功能完善、交互友好的企业级数据表格，满足各种复杂业务场景需求。

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考