【Ant Design Vue V3版本填坑记录三】一套代码实现表格常用属性

<script setup>
  import {
    DownOutlined,
    UserOutlined,
    ToolOutlined,
    StarOutlined,
    StarFilled,
    HeartTwoTone,
    MessageOutlined,
    createFromIconfontCN,
    CheckOutlined,
    EditOutlined
  } from '@ant-design/icons-vue';
  import {
    message
  } from 'ant-design-vue';
  import {
    reactive,
    ref
  } from 'vue';
  // 设置数据的加载状态
  let loading = ref(false)
  // 表格列相关字段属性配置
  const columns = reactive([{
      dataIndex: 'tid',
      title: "序号",
      align: "center"
    },
    // columns[n] 可以内嵌 children，以渲染分组表头。
    {
      title: "基本信息",
      children: [{
        dataIndex: 'tname',
        title: "姓名",
        align: "center",
        // responsive 响应式 breakpoint 配置列表。未设置则始终可见。 Breakpoint['xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs']
        responsive: ['xxl']
      }, {
        dataIndex: 'tgender',
        title: "性别",
        align: "center",
        // customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引  Function({text, record, index, column}) {}
        customRender: ({
          text,
          record,
          index,
          column
        }) => {
          // console.log(text, record, index, column)
          return record.tgender === 0 ? '男' : '女'
        },
        // filters 表头的筛选菜单项   object[]
        filters: [{
          text: '男',
          value: 0
        }, {
          text: '女',
          value: 1
        }, {
          text: '未知',
          value: -1
        }]
      }, {
        dataIndex: 'tage',
        key: 'tage',
        title: "年龄",
        align: "center",
        width: 120,
        minWidth: 120,
        maxWidth: 160,
        // 列排序配置项
        sorter: {
          // compare 配置排序逻辑的比较函数
          compare: (a, b) => a.tage - b.tage,
          // multiple 字段配置多列排序优先级。数值越大，优先级越高。
          multiple: 2
        },
        // resizable 设置是否可拖动调整宽度，此时 width 必须是 number 类型。需要配合 resizeColumn 事件一起使用
        resizable: true, // Tip: Vite+Vue3+Ant3 环境下，尝试不生效。
      }]
    },
    {
      dataIndex: 'tscore',
      title: "成绩",
      align: "center",
      width: 120,
      resizable: true,
      // sorter 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true     Function|boolean
      // sorter: true,
      // 列排序配置项
      sorter: {
        // compare 配置排序逻辑的比较函数
        compare: (a, b) => a.tscore - b.tscore,
        // multiple 字段配置多列排序优先级
        multiple: 1
      }
      // sortOrder 排序的受控属性（禁用某种排序条件），可设置为 'ascend' 'descend' false  
      // sortOrder: 'descend'
    }, {
      title: "联系方式",
      children: [{
        dataIndex: "tphone",
        title: "固定电话",
        // colSpan 表头列合并（Tip：表头只支持列合并）,设置为 0 时，不渲染    number
        // colSpan: 2,
        // customCell 设置单元格属性 Function(record, rowIndex, column)  
        customCell: (record, rowIndex, column) => {
          // 三个参数：当前行数据，当前行索引，当前行的column字段信息
          // console.log(record, rowIndex, column)
          if (rowIndex == 2) {
            // 表格内容 行/列合并。当单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。    
            return {
              colSpan: 2,
              rowSpan: 2
            }
          }
          // 下面配合上面 行 合并数量的多少，去定义已被合并行 不渲染（rowSpan设值为0）
          if (rowIndex == 3) {
            return {
              rowSpan: 0
            }
          }
        },
      }, {
        title: "手机号",
        dataIndex: "ttel",
        // colSpan 设置为 0 时，不渲染当前表头列（配合前面合并）
        // colSpan: 0,
        // 下面配合上一行中对应 列 合并数量的多少，去定义已被合并 列 不渲染（colSpan 设值为 0）
        customCell(record, rowIndex, column) {
          // console.log(record, rowIndex, column)
          if (rowIndex === 2) {
            return {
              colSpan: 0
            }
          }
          if (rowIndex === 3) {
            return {
              colSpan: 0
            }
          }
        }
      }]
    }, {
      dataIndex: "tnote",
      title: "备注",
      width: 200,
      ellipsis: true,
    }, {
      dataIndex: 'operation',
      title: "操作",
      align: "center",
      width: 240,
      fixed: "right"
    }
  ])
  const data = reactive([{
    tid: 1,
    tname: "Magnum",
    tgender: 0,
    tage: 23,
    tscore: 38,
    tphone: "010-86888888",
    ttel: "13933939663",
    tnote: "备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！"
  }, {
    tid: 2,
    tname: "梦龙",
    tgender: 0,
    tage: 18,
    tscore: 88,
    tphone: "010-86888889",
    ttel: "13933939665",
    children: [{
      tid: 21,
      tname: "梦龙",
      tgender: 0,
      tage: 26,
      tscore: 36,
      tphone: "010-86888889",
      ttel: "13933939665",
    }, {
      tid: 22,
      tname: "梦龙",
      tgender: 0,
      tage: 19,
      tscore: 66,
      tphone: "010-86888889",
      ttel: "13933939665",
    }]
  }, {
    tid: 3,
    tname: "景泽",
    tgender: 0,
    tage: 25,
    tscore: 96,
    tphone: "010-86888880",
    ttel: "13933939668",
  }, {
    tid: 4,
    tname: "KyungTaek",
    tgender: 0,
    tage: 22,
    tscore: 88,
    tphone: "010-86888866",
    ttel: "13933939666",
    description: "放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！"
  }])
  // 获取两个数字之间的随机整数
  const getRanNum = (m, n) => {
    if (m > n) {
      return Math.round((Math.random() * (m - n))) + n
    } else {
      return Math.round((Math.random() * (n - m))) + m
    }
  }
  // 添加一行新的数据
  const addNewData = () => {
    let newData = {
      tid: data.length + 1,
      tname: ['张三', '李四', '王五', '赵六', '王二麻子'][getRanNum(0, 4)] + getRanNum(0, 1000),
      tgender: getRanNum(0, 1),
      tage: getRanNum(18, 22),
      tscore: getRanNum(0, 100),
      tphone: "",
      ttel: ""
    }
    data.push(newData)
  }
  // 深度克隆
  const deepClone = (obj) => {
    return JSON.parse(JSON.stringify(obj))
  }
  // 编辑单元格内容
  const editData = reactive({})
  const edit = (field, record) => { // field - 要修改的字段   data - 字段对应的数据 
    editData[record[field]] = deepClone(record)
    console.log(field, record, editData)
  }
  // 保存当前编辑的数据
  const saveData = (field, record) => {
    let key = record[field]
    console.log(field, record, editData)
    // record = {...editData[key]}
    Object.assign(data.find(v => v[field] === key), editData[key])
    console.log(field, record, editData)
    delete editData[key]
  }
  // 配置可选项（Tip：需要配合 table 属性 rowKey 使用）
  const rowSelection = reactive({
    // checkStrictly 配置父子数据选中状态不关联  true(默认值，不关联) | false(关联)
    checkStrictly: true,
    // onChange 选中项发生变化时的回调 Function(selectedRowKeys, selectedRows)
    onChange(selectedRowKeys, selectedRows) {
      console.log(`选中项发生变化...selectedRowKeys：${selectedRowKeys}, selectedRows：${selectedRows}`)
    },
    // onSelect 用户手动选择/取消选择某列的回调 Function(record, selected, selectedRows, nativeEvent)
    onSelect(record, selected, selectedRows, nativeEvent) {
      console.log("手动选择/取消选择某列...", record, selected, selectedRows, nativeEvent);
    },
    // onSelectAll 用户手动选择/取消选择所有列的回调  Function(selected, selectedRows, changeRows)
    onSelectAll(selected, selectedRows, changeRows) {
      console.log("手动选择/取消选择所有列...", selected, selectedRows, changeRows)
    },
    // onSelectInvert 用户手动选择反选的回调 Function(selectedRows)
    onSelectInvert(selectedRows) {
      console.log("手动选择反选....", selectedRows)
    },
    // onSelectNone 用户清空选择的回调 function()
    onSelectNone() {
      console.log(("清空选择...."))
    }
  })
  // 后端实现筛选排序：这里筛选排序功能交给服务端实现，列不需要指定具体的 onFilter 和 sorter 函数，而是在把筛选和排序的参数发到服务端来处理。
  // @change 分页、排序、筛选变化时触发    Function(pagination, filters, sorter, { currentDataSource })
  const handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter)
  }
  // 前端实现筛选排序：通过指定具体的 onFilter 和 sorter 函数实现
  // @resizeColumn 拖动列时触发的事件  Function(width, column)
  const handleResizeColumn = (w, col) => {
    console.log(w, col, "=================")
    col.width = w;
  };
  // createFromIconfontCN 方法，调用在 iconfont.cn 上自行管理的图标
  const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
  });
  // Popconfirm 气泡确认框。对应的确认和取消事件
  const confirm = (rowIdx) => {
    data.splice(rowIdx, 1)
    // 调用异步删除的接口，待返回数据后执行如下 message 提示
    message.success('删除成功！');
  };
  const cancel = (e) => {
    console.log(e);
    message.info('删除操作已取消！');
  };
</script>
<template>
  <div class="wrapper">
    <a-space>
      <!-- 所有的图标都会以 <svg> 标签渲染，可以使用 style 和 class 设置图标的大小和单色图标的颜色。 -->
      <star-outlined />
      <star-filled :style="{fontSize: '16px', color: '#f00'}" />
      <!-- 使用 SVG 图标的好处：完全离线化使用；在低端设备上 SVG 有更好的清晰度；支持多色图标 -->
      <!-- x-two-tone 双色图标风格    x-ouline 线框风格     x-filled 实底风格-->
      <heart-two-tone two-tone-color="#eb2f96" />
      <!-- 渲染阿里矢量图标库 iconfont.cn 上自行管理的图标 -->
      <MyIcon type="icon-dianzan" style="fontSize:24px;color: orange;" />
      <!-- 添加数据按钮 -->
      <a-button @click="addNewData">添加</a-button>
      <!-- 控制 Tree 数据选择时，父子数据选中状态是否关联 -->
      CheckStrictly：<a-switch v-model:checked="rowSelection.checkStrictly"></a-switch>
    </a-space>
    <!-- dataSource 配置数据源。任意数组对象，数组中的每一个对象，作为一行数据的集合  -->
    <!-- columns 配置列相关属性。如：title、dataIndex、align 等常见属性 -->
    <!-- scroll  设置指定滚动区域的相关特性。如果设置滚动区域的值，区域(x,y)，此特性可用于固定头和列。-->
    <!-- size 设置表格大小  default(默认) | middle | small   注：small 小型列表只用于对话框内-->
    <!-- rowSelection 配置列表项是否可选择（配置项 object 属性见 API） -->
    <!-- rowClassName 表格行的类名  Function(record, index):string -->
    <a-table class="table" bordered :dataSource="data" :columns="columns" :loading="loading" size="middle"
      :scroll="{ x: 1500, y: 500  }" @resizeColumn="handleResizeColumn" @change="handleTableChange"
      :rowSelection="rowSelection" :indentSize="30" :rowKey="record => record.tid"
      :rowClassName="(record,index) => index % 2 === 1 ? 'table-striped' : null">
      <!-- headerCell 个性化头部单元格  v-slot:headerCell="{title, column}" -->
      <template #headerCell="{ title, column }">
        <span v-if="column.dataIndex=='tname'">
          <user-outlined />
          {{ title }}
        </span>
        <span v-if="column.dataIndex=='operation'">
          <tool-outlined />
          {{ title }}
        </span>
      </template>
      <!-- bodyCell 个性化单元格  v-slot:bodyCell="{text, record, index, column}" -->
      <template #bodyCell="{ text, record, index, column }">
        <!-- 当前单元格的值：{{ text }} ~ 当前行数据：{{ record }} ~ 当前行的索引：{{index}} ~ 当前列相关属性：{{column}} -->
        <!-- <span v-if="column.dataIndex === 'tgender'">{{ record.tgender === 0 ? '男' : '女' }}</span> -->
        <span v-if="column.dataIndex === 'operation'">
          <!-- shape 用于设置按钮形状  default | round | circle -->
          <a-button type="primary" shape="round">编辑</a-button>
          <!-- Popconfirm 气泡确认框。当目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。 -->
          <a-popconfirm title="确认删除当前人员信息？" ok-text="确认" cancel-text="取消" @confirm="confirm(index)"
            @cancel="cancel">
            <a-button type="warning" shape="round" class="m-l-10">删除</a-button>
          </a-popconfirm>
        </span>
        <div v-if="['ttel','tphone'].includes(column.dataIndex)">
          <div v-if="!editData[record[column.dataIndex]]">
            {{ text || ''}}
            <!-- 设置联系方式可编辑 icon -->
            <edit-outlined class="h-edit-icon" @click="edit(column.dataIndex,record)" />
          </div>
          <div v-else>
            <a-input v-model:value="editData[record[column.dataIndex]][column.dataIndex]"
              @pressEnter="saveData(column.dataIndex,record)" />
            <check-outlined class="h-check-icon" @click="saveData(column.dataIndex,record)" />
          </div>
        </div>
      </template>
      <!-- expandedRowRender  额外的展开行  Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender="{record, index, indent, expanded}" -->
      <!-- <template #expandedRowRender="{ record }">
        <p style="margin: 0">
          {{ record?.description??'' }}
        </p>
      </template> -->
      <!-- Tip：额外的展开行不能与 Table Tree 一起使用（dataSource中不能有children），控制台报错。且不要存在行合并，样式会错位。 -->
      <!-- title  表格标题  Function(currentPageData)|v-slot:title="currentPageData" -->
      <template #title><strong>header 表格头部 ~~~~ title表格标题</strong></template>
      <!-- summary 总结栏  v-slot:summary -->
      <template #summary>
        <!-- 通过 summary 设置总结栏。使用 a-table-summary-cell 同步 Column 的固定状态。你可以通过配置 a-table-summary 的 fixed 属性使其固定。 -->
        <a-table-summary fixed>
          <a-table-summary-row>
            <a-table-summary-cell :index="0">Summary</a-table-summary-cell>
            <a-table-summary-cell :index="1">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="2">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="3">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="4">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="5">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="6">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="7">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="8">当前列总结内容</a-table-summary-cell>
            <a-table-summary-cell :index="9">当前列总结内容</a-table-summary-cell>
          </a-table-summary-row>
        </a-table-summary>
      </template>
      <!-- footer 表格尾部  Function(currentPageData)|v-slot:footer="currentPageData" -->
      <template #footer><strong>footer ~~~ 表格尾部</strong></template>
      <!-- emptyText  自定义空数据时的显示内容  v-slot:emptyText -->
      <template #emptyText>
        <!-- a-empty 用于定义空状态的组件 -->
        <a-empty description="列表为空">
          <!-- description 自定义描述内容   string | v-slot -->
          <!-- <template #description>暂无数据</template> -->
        </a-empty>
        <!-- <span>暂无数据</span> -->
      </template>
      <!-- Tip：默认情况下，列表中无数据，会有默认的空状态展示 -->
    </a-table>
  </div>
</template>