uView Next

# Table 表格 新

表格组件一般用于展示大量结构化数据的场景，支持数据排序、自定义列内容、行列样式等功能。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ X √ √

# 功能特性

  • ✅ 基础表格展示 - 支持数据展示、排序、自定义列等基础功能
  • ✅ 多选功能 - 支持行多选、全选、默认选中等操作
  • ✅ 合并单元格 - 支持跨行/跨列合并，提供三种实现方式
  • ✅ 自定义模板 - 支持自定义列内容、表头、空状态等

# 基本使用

最简单的表格使用方式，通过data属性传入数据，配合u-table-column定义列：

<template>
  <view>
    <u-table :data="tableData">
      <u-table-column prop="name" label="姓名" width="120"></u-table-column>
      <u-table-column prop="age" label="年龄" width="80" align="center"></u-table-column>
      <u-table-column prop="address" label="地址"></u-table-column>
    </u-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 25,
          address: '北京市朝阳区'
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 28,
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

✅ Copy success!

# 固定高度和滚动

设置height属性可以固定表格高度，超出部分会显示滚动条：

<template>
  <u-table :data="tableData" :border="true" height="300">
    <u-table-column prop="name" label="姓名" width="120"></u-table-column>
    <u-table-column prop="age" label="年龄" width="80"></u-table-column>
    <u-table-column prop="address" label="地址"></u-table-column>
  </u-table>
</template>

✅ Copy success!

# 斑马纹表格

通过stripe属性可以创建斑马纹表格：

<template>
  <u-table :data="tableData" :border="true" :stripe="true">
    <u-table-column prop="name" label="姓名"></u-table-column>
    <u-table-column prop="age" label="年龄"></u-table-column>
    <u-table-column prop="address" label="地址"></u-table-column>
  </u-table>
</template>

✅ Copy success!

# 排序功能

设置列的sortable属性可以启用排序：

<template>
  <u-table :data="tableData" :border="true" @sort-change="handleSortChange">
    <u-table-column prop="name" label="姓名" sortable></u-table-column>
    <u-table-column prop="age" label="年龄" sortable></u-table-column>
    <u-table-column prop="score" label="分数" sortable></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, score: 95 },
        { name: '李四', age: 30, score: 88 },
        { name: '王五', age: 28, score: 92 }
      ]
    }
  },
  methods: {
    handleSortChange(sortInfo) {
      console.log('排序信息:', sortInfo)
    }
  }
}
</script>

✅ Copy success!

# 自定义列模板

可以通过插槽自定义列的显示内容：

<template>
  <u-table :data="tableData" height="300">
	<u-table-column type="index" label="序号" sortable/>
	<u-table-column prop="name" label="姓名" sortable />
	<u-table-column prop="status" label="状态" align="center">
		<template #default="{ row, value }">
			<u-tag :text="getStatusText(value)" :type="getStatusType(value)" size="mini" />
		</template>
	</u-table-column>
	<u-table-column prop="createTime" label="创建时间" :formatter="formatTime" sortable/>
	<u-table-column label="操作" width="150" align="center">
		<template #default="{ row, index }">
			<u-button size="mini" type="primary" @click="handleEdit(row, index)">编辑</u-button>
		</template>
	</u-table-column>
</u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 25,
		  status: 1,
		  createTime: new Date('2024-01-23'),
        },
        {
          name: '李四',
          age: 30,
		  status: 2,
          createTime: new Date('2024-02-23'),
        },
		{
          name: '赵五',
          age: 32,
		  status: 0,
          createTime: new Date('2024-03-23'),
        },
      ]
    }
  },
  methods: {
	// 获取状态文本
	getStatusText(status) {
		const statusMap = {
			0: '禁用',
			1: '正常',
			2: '待审核'
		}
		return statusMap[status] || '未知'
	},

	// 获取状态类型
	getStatusType(status) {
		const typeMap = {
			0: 'error',
			1: 'success',
			2: 'warning'
		}
		return typeMap[status] || 'info'
	},
	// 格式化时间
	formatTime(value) {
		if (!value) return ''
		const date = new Date(value)
		return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
	},
    // 处理编辑
	handleEdit(row, index) {
		uni.showToast({
			title: `编辑${row.name}`,
			icon: 'none'
		})
	},
  }
}
</script>

✅ Copy success!

# 多选功能

表格支持多选功能，类似于element-plus的多选表格：

<template>
  <view>
    <u-table 
      :data="tableData" 
      rowKey="id"
      @selection-change="handleSelectionChange"
      @select="handleSelect"
      @select-all="handleSelectAll"
    >
      <u-table-column type="selection" width="55" align="center"></u-table-column>
      <u-table-column prop="name" label="姓名" width="120"></u-table-column>
      <u-table-column prop="age" label="年龄" width="80" align="center"></u-table-column>
      <u-table-column prop="email" label="邮箱"></u-table-column>
      <u-table-column prop="address" label="地址"></u-table-column>
    </u-table>
    
    <!-- 显示选中结果 -->
    <view style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
      <text style="font-weight: bold;">选中的数据：</text>
      <view v-if="selectedRows.length === 0" style="color: #999; margin-top: 5px;">
        暂未选择任何数据
      </view>
      <view v-else style="margin-top: 5px;">
        <text v-for="(item, index) in selectedRows" :key="item.id" style="margin-right: 10px;">
          {{ item.name }}{{ index < selectedRows.length - 1 ? ',' : '' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: [],
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 25,
          email: 'zhangsan@example.com',
          address: '北京市朝阳区'
        },
        {
          id: 2,
          name: '李四',
          age: 30,
          email: 'lisi@example.com',
          address: '上海市浦东新区'
        },
        {
          id: 3,
          name: '王五',
          age: 28,
          email: 'wangwu@example.com',
          address: '广州市天河区'
        },
        {
          id: 4,
          name: '赵六',
          age: 32,
          email: 'zhaoliu@example.com',
          address: '深圳市南山区'
        }
      ]
    }
  },
  methods: {
    // 选择项变化事件
    handleSelectionChange(selection) {
      this.selectedRows = selection
      console.log('当前选中的行：', selection)
    },
    
    // 单行选择事件
    handleSelect(selection, row) {
      console.log('选择了行：', row)
      console.log('当前所有选中行：', selection)
    },
    
    // 全选事件
    handleSelectAll(selection) {
      console.log('全选操作，当前选中行：', selection)
    }
  }
}
</script>

✅ Copy success!

# 默认选中行

可以通过defaultSelection属性设置默认选中的行：

<template>
  <u-table 
    :data="tableData" 
    rowKey="id"
    :defaultSelection="defaultSelectedRows"
    @selection-change="handleSelectionChange"
  >
    <u-table-column type="selection" width="55" align="center"></u-table-column>
    <u-table-column prop="name" label="姓名" width="120"></u-table-column>
    <u-table-column prop="age" label="年龄" width="80" align="center"></u-table-column>
    <u-table-column prop="status" label="状态" width="100" align="center">
      <template #default="{ row }">
        <u-tag :text="row.status === 1 ? '正常' : '禁用'" :type="row.status === 1 ? 'success' : 'error'" size="mini"></u-tag>
      </template>
    </u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 25,
          status: 1
        },
        {
          id: 2,
          name: '李四', 
          age: 30,
          status: 0
        },
        {
          id: 3,
          name: '王五',
          age: 28,
          status: 1
        }
      ],
      // 默认选中第一行和第三行
      defaultSelectedRows: []
    }
  },
  created() {
    // 设置默认选中状态为1的行
    this.defaultSelectedRows = this.tableData.filter(item => item.status === 1)
  },
  methods: {
    handleSelectionChange(selection) {
      console.log('选择变化：', selection)
    }
  }
}
</script>

✅ Copy success!

# 空数据状态

当表格没有数据时，可以显示自定义的空状态：

<template>
  <u-table :data="[]" :border="true" emptyText="暂无数据" emptyHeight="200">
    <u-table-column prop="name" label="姓名"></u-table-column>
    <u-table-column prop="age" label="年龄"></u-table-column>
    <u-table-column prop="address" label="地址"></u-table-column>
    
    <!-- 自定义空状态 -->
    <template #empty>
      <view style="text-align: center; padding: 40px;">
        <u-icon name="inbox" size="60" color="#c0c4cc"></u-icon>
        <text style="display: block; margin-top: 10px; color: #909399;">暂无数据</text>
      </view>
    </template>
  </u-table>
</template>

✅ Copy success!

# 单元格点击事件

可以监听单元格点击事件：

<template>
  <u-table :data="tableData" :border="true" @cell-click="handleCellClick">
    <u-table-column prop="name" label="姓名"></u-table-column>
    <u-table-column prop="age" label="年龄"></u-table-column>
    <u-table-column prop="address" label="地址"></u-table-column>
  </u-table>
</template>

<script>
export default {
  methods: {
    handleCellClick(cellData) {
      console.log('点击的单元格:', cellData)
      // cellData 包含 row, column, rowIndex, columnIndex, value 等信息
    }
  }
}
</script>

✅ Copy success!

# 合并单元格

表格支持强大的合并单元格功能，提供三种不同的实现方式满足各种业务场景需求。

# 方法一：spanMethod 自定义合并（推荐）

通过 spanMethod 方法可以完全自定义合并逻辑，适用于复杂的合并场景：

<template>
  <u-table 
    :data="tableData" 
    :span-method="spanMethod"
    :border="true" 
    :stripe="true"
    height="300"
  >
    <u-table-column prop="department" label="部门" width="120"></u-table-column>
    <u-table-column prop="name" label="姓名" width="100"></u-table-column>
    <u-table-column prop="position" label="职位" width="120"></u-table-column>
    <u-table-column prop="salary" label="薪资" align="right" width="100"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { department: '技术部', name: '张三', position: '前端工程师', salary: '15000' },
        { department: '技术部', name: '李四', position: '后端工程师', salary: '16000' },
        { department: '技术部', name: '王五', position: '架构师', salary: '25000' },
        { department: '产品部', name: '赵六', position: '产品经理', salary: '18000' },
        { department: '产品部', name: '钱七', position: '产品助理', salary: '12000' },
        { department: '设计部', name: '孙八', position: 'UI设计师', salary: '14000' }
      ]
    }
  },
  
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并部门列
      if (column.prop === 'department') {
        // 技术部：前3行合并
        if (rowIndex <= 2) {
          if (rowIndex === 0) {
            return { rowspan: 3, colspan: 1 }
          } else {
            return { rowspan: 0, colspan: 0 }
          }
        }
        // 产品部：第3-4行合并
        else if (rowIndex >= 3 && rowIndex <= 4) {
          if (rowIndex === 3) {
            return { rowspan: 2, colspan: 1 }
          } else {
            return { rowspan: 0, colspan: 0 }
          }
        }
        // 设计部：第5行独立
        else if (rowIndex === 5) {
          return { rowspan: 1, colspan: 1 }
        }
      }
      
      // 默认不合并
      return { rowspan: 1, colspan: 1 }
    }
  }
}
</script>

✅ Copy success!

# 方法二：mergeConfig 简化配置

通过 mergeConfig 数组可以快速配置简单的合并场景：

<template>
  <u-table 
    :data="tableData" 
    :merge-config="mergeConfig"
    :border="true" 
    :stripe="true"
    height="300"
  >
    <u-table-column prop="category" label="类别" width="120"></u-table-column>
    <u-table-column prop="product" label="产品" width="150"></u-table-column>
    <u-table-column prop="price" label="价格" align="right" width="100"></u-table-column>
    <u-table-column prop="stock" label="库存" align="center" width="80"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: '电子产品', product: 'iPhone 15', price: '5999', stock: '100' },
        { category: '电子产品', product: '小米14', price: '3999', stock: '150' },
        { category: '电子产品', product: '华为Mate60', price: '6999', stock: '80' },
        { category: '家居用品', product: '沙发', price: '3000', stock: '50' },
        { category: '家居用品', product: '餐桌', price: '1500', stock: '30' },
        { category: '服装', product: 'T恤', price: '99', stock: '200' }
      ],
      
      mergeConfig: [
        {
          prop: 'category',  // 要合并的列
          ranges: [
            { startRow: 0, endRow: 2 },  // 第0-2行合并
            { startRow: 3, endRow: 4 },  // 第3-4行合并
            // 第5行不合并
          ]
        }
      ]
    }
  }
}
</script>

✅ Copy success!

# 方法三：动态自动合并相同值

通过算法自动检测相同值并合并相邻行：

<template>
  <u-table 
    :data="tableData" 
    :span-method="autoMergeMethod"
    :border="true" 
    :stripe="true"
    height="300"
  >
    <u-table-column prop="region" label="地区" width="100"></u-table-column>
    <u-table-column prop="city" label="城市" width="100"></u-table-column>
    <u-table-column prop="sales" label="销售额" align="right" width="120"></u-table-column>
    <u-table-column prop="growth" label="增长率" align="center" width="100"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { region: '华东', city: '上海', sales: '1000000', growth: '15%' },
        { region: '华东', city: '杭州', sales: '800000', growth: '20%' },
        { region: '华东', city: '南京', sales: '600000', growth: '10%' },
        { region: '华南', city: '深圳', sales: '1200000', growth: '25%' },
        { region: '华南', city: '广州', sales: '900000', growth: '18%' },
        { region: '华北', city: '北京', sales: '1500000', growth: '12%' }
      ]
    }
  },
  
  methods: {
    // 自动合并相同值的单元格
    autoMergeMethod({ row, column, rowIndex, columnIndex }) {
      if (column.prop === 'region') {
        // 计算相同地区的连续行数
        const currentValue = row[column.prop]
        let startIndex = rowIndex
        let endIndex = rowIndex
        
        // 向前找到开始位置
        while (startIndex > 0 && this.tableData[startIndex - 1][column.prop] === currentValue) {
          startIndex--
        }
        
        // 向后找到结束位置
        while (endIndex < this.tableData.length - 1 && this.tableData[endIndex + 1][column.prop] === currentValue) {
          endIndex++
        }
        
        const spanCount = endIndex - startIndex + 1
        
        if (spanCount > 1) {
          if (rowIndex === startIndex) {
            // 第一行显示合并的单元格
            return { rowspan: spanCount, colspan: 1 }
          } else {
            // 其他行隐藏
            return { rowspan: 0, colspan: 0 }
          }
        }
      }
      
      return { rowspan: 1, colspan: 1 }
    }
  }
}
</script>

✅ Copy success!

# 跨列合并示例

合并单元格功能同时支持跨行和跨列合并：

<template>
  <u-table 
    :data="tableData" 
    :span-method="spanMethodWithColspan"
    :border="true"
  >
    <u-table-column prop="quarter" label="季度" width="100"></u-table-column>
    <u-table-column prop="month" label="月份" width="100"></u-table-column>
    <u-table-column prop="sales" label="销售额" width="120"></u-table-column>
    <u-table-column prop="target" label="目标" width="120"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { quarter: 'Q1', month: '1月', sales: '100万', target: '120万' },
        { quarter: '', month: '2月', sales: '110万', target: '120万' },
        { quarter: '', month: '3月', sales: '130万', target: '120万' },
        { quarter: 'Q2', month: '4月', sales: '140万', target: '150万' },
        { quarter: '', month: '5月', sales: '160万', target: '150万' },
        { quarter: '', month: '6月', sales: '170万', target: '150万' }
      ]
    }
  },
  
  methods: {
    spanMethodWithColspan({ row, column, rowIndex, columnIndex }) {
      // 季度列跨行合并
      if (column.prop === 'quarter') {
        if (rowIndex === 0 || rowIndex === 3) {
          return { rowspan: 3, colspan: 1 }
        } else if ([1, 2, 4, 5].includes(rowIndex)) {
          return { rowspan: 0, colspan: 0 }
        }
      }
      
      // 也可以实现跨列合并
      // 例如：某个单元格跨两列
      // if (rowIndex === 0 && column.prop === 'sales') {
      //   return { rowspan: 1, colspan: 2 }
      // }
      
      return { rowspan: 1, colspan: 1 }
    }
  }
}
</script>

✅ Copy success!

# 表尾合计行

表格支持显示表尾合计行，提供多种合计计算方式，满足不同的业务统计需求。

# 基础使用

设置 showSummary 为 true 可以显示表尾合计行，默认会自动合计所有数字列：

<template>
  <u-table 
    :data="tableData" 
    :show-summary="true"
    :border="true" 
    :stripe="true"
    height="300"
  >
    <u-table-column prop="product" label="产品" width="120"></u-table-column>
    <u-table-column prop="quantity" label="数量" align="center" width="80"></u-table-column>
    <u-table-column prop="price" label="单价" align="right" width="100"></u-table-column>
    <u-table-column prop="amount" label="金额" align="right" width="100"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { product: 'iPhone 15', quantity: 10, price: 5999, amount: 59990 },
        { product: '小米14', quantity: 15, price: 3999, amount: 59985 },
        { product: '华为Mate60', quantity: 8, price: 6999, amount: 55992 },
        { product: 'MacBook Pro', quantity: 5, price: 12999, amount: 64995 },
        { product: 'iPad Air', quantity: 12, price: 4399, amount: 52788 }
      ]
    }
  }
}
</script>

✅ Copy success!

# 指定合计列

通过 summaryColumns 属性可以指定哪些列需要合计，同时可以自定义合计行第一列的文本：

<template>
  <u-table 
    :data="tableData" 
    :show-summary="true" 
    :summary-columns="['sales', 'profit']"
    sum-text="总计"
    :border="true" 
    :stripe="true"
    height="280"
  >
    <u-table-column prop="department" label="部门" width="120"></u-table-column>
    <u-table-column prop="employee" label="员工" width="100"></u-table-column>
    <u-table-column prop="sales" label="销售额" align="right" width="120"></u-table-column>
    <u-table-column prop="profit" label="利润" align="right" width="100"></u-table-column>
    <u-table-column prop="rate" label="利润率" align="center"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { department: '销售部', employee: '张三', sales: 120000, profit: 24000, rate: '20%' },
        { department: '销售部', employee: '李四', sales: 95000, profit: 19000, rate: '20%' },
        { department: '市场部', employee: '王五', sales: 80000, profit: 12000, rate: '15%' },
        { department: '市场部', employee: '赵六', sales: 110000, profit: 16500, rate: '15%' },
        { department: '技术部', employee: '钱七', sales: 0, profit: 0, rate: '0%' }
      ]
    }
  }
}
</script>

✅ Copy success!

# 自定义合计方法

通过 summaryMethod 可以完全自定义合计行的计算逻辑，支持复杂的统计需求：

<template>
  <u-table 
    :data="tableData" 
    :show-summary="true" 
    :summary-method="customSummaryMethod"
    :border="true" 
    :stripe="true"
    height="320"
  >
    <u-table-column type="selection" width="55" align="center"></u-table-column>
    <u-table-column prop="category" label="类别" width="100"></u-table-column>
    <u-table-column prop="name" label="商品名称" width="150"></u-table-column>
    <u-table-column prop="cost" label="成本" align="right" width="100"></u-table-column>
    <u-table-column prop="price" label="售价" align="right" width="100"></u-table-column>
    <u-table-column prop="stock" label="库存" align="center"></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: '数码', name: 'iPhone 15', cost: 4500, price: 5999, stock: 50 },
        { category: '数码', name: '小米14', cost: 2800, price: 3999, stock: 80 },
        { category: '家电', name: '电视', cost: 2000, price: 2999, stock: 30 },
        { category: '家电', name: '洗衣机', cost: 1500, price: 2299, stock: 25 },
        { category: '服装', name: 'T恤', cost: 30, price: 99, stock: 200 },
        { category: '服装', name: '牛仔裤', cost: 80, price: 199, stock: 150 }
      ]
    }
  },
  
  methods: {
    // 自定义合计方法
    customSummaryMethod({ columns, data }) {
      const summaryData = []
      
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列显示自定义文本
          summaryData[index] = '统计汇总'
        } else if (column.prop === 'cost') {
          // 成本列：计算总成本
          const totalCost = data.reduce((sum, row) => {
            return sum + (parseFloat(row.cost) || 0)
          }, 0)
          summaryData[index] = `￥${totalCost.toLocaleString()}`
        } else if (column.prop === 'price') {
          // 售价列：计算平均售价
          const totalPrice = data.reduce((sum, row) => {
            return sum + (parseFloat(row.price) || 0)
          }, 0)
          const avgPrice = totalPrice / data.length
          summaryData[index] = `平均: ￥${avgPrice.toFixed(2)}`
        } else if (column.prop === 'stock') {
          // 库存列：计算总库存
          const totalStock = data.reduce((sum, row) => {
            return sum + (parseInt(row.stock) || 0)
          }, 0)
          summaryData[index] = `${totalStock} 件`
        } else if (column.prop === 'category') {
          // 类别列：显示种类数量
          const categories = [...new Set(data.map(row => row.category))]
          summaryData[index] = `${categories.length} 类`
        } else {
          summaryData[index] = ''
        }
      })
      
      return summaryData
    }
  }
}
</script>

✅ Copy success!

# 合计行与其他功能结合

表尾合计行与表格的其他功能（排序、多选、合并单元格等）完全兼容：

<template>
  <u-table 
    :data="tableData" 
    :show-summary="true"
    :summary-columns="['amount']"
    sum-text="合计"
    @selection-change="handleSelectionChange"
    @sort-change="handleSortChange"
    :border="true" 
    height="350"
  >
    <u-table-column type="selection" width="55" align="center"></u-table-column>
    <u-table-column type="index" label="序号" width="60" align="center"></u-table-column>
    <u-table-column prop="product" label="产品" sortable></u-table-column>
    <u-table-column prop="quantity" label="数量" align="center" sortable></u-table-column>
    <u-table-column prop="price" label="单价" align="right" sortable></u-table-column>
    <u-table-column prop="amount" label="金额" align="right" sortable></u-table-column>
  </u-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { product: 'iPhone 15', quantity: 10, price: 5999, amount: 59990 },
        { product: '小米14', quantity: 15, price: 3999, amount: 59985 },
        { product: '华为Mate60', quantity: 8, price: 6999, amount: 55992 }
      ]
    }
  },
  
  methods: {
    handleSelectionChange(selection) {
      console.log('选中的行:', selection)
    },
    
    handleSortChange(sortInfo) {
      console.log('排序信息:', sortInfo)
    }
  }
}
</script>

✅ Copy success!

# API

# Table Props

参数 说明 类型 默认值 可选值
data 显示的数据 Array [] -
border 是否带有边框 Boolean true false
scrollX 是否允许横向滚动 Boolean true false
stripe 是否为斑马纹表格 Boolean false true
height Table的高度，单位px String | Number null -
rowHeight 行高，单位px String | Number 50 -
showHeader 是否显示表头 Boolean true false
ellipsis 是否超出隐藏 Boolean true false
emptyText 空数据时显示的文本 String 暂无数据 -
emptyHeight 空数据区域高度，单位px String | Number 200 -
rowKey 行数据的Key，用于优化Table的渲染和多选功能 String id -
defaultSelection 默认选中的行数据 Array [] -
round 设置圆角值 String | Number 0 -
customClass 自定义类名 String - -
customStyle 定义需要用到的外部样式 Object | String {} -
spanMethod 合并单元格的方法 Function null -
mergeConfig 合并配置数组（简化版） Array [] -
showSummary 是否显示表尾合计行 Boolean false true
sumText 表尾合计行第一列的文本 String 合计 -
summaryMethod 自定义的合计计算方法 Function null -
summaryColumns 需要合计的列（prop数组） Array [] -

# Table Events

事件名称 说明 回调参数
sort-change 排序变化事件 { column, prop, order }
cell-click 单元格点击事件 { row, column, rowIndex, columnIndex, value }
selection-change 选择项发生变化时会触发该事件 selection（当前选中行数据的数组）
select 用户手动勾选数据行的 Checkbox 时触发的事件 selection（当前选中行数据的数组）, row（当前行数据）
select-all 用户手动勾选全选 Checkbox 时触发的事件 selection（当前选中行数据的数组）

# Table Slots

插槽名称 说明
default 表格列内容
empty 空数据时的内容

# Table Methods

方法名 说明 参数
toggleRowSelection 用于多选表格，切换某一行的选中状态 row（行数据）, selected（是否选中，不传则切换当前状态）
clearSelection 用于多选表格，清空用户的选择 -
getSelectionRows 用于多选表格，返回当前选中的行 -

# Table Column Props

参数 说明 类型 默认值 可选值
prop 字段名称，对应列内容的字段名 String - -
label 显示的标题 String - -
width 列宽度 String | Number auto -
minWidth 列最小宽度 String | Number - -
align 对齐方式 String left left / center / right
sortable 是否可排序 Boolean false true
type 列类型 String - index / selection
formatter 格式化函数 Function null -
show 是否显示 Boolean true false
className 列的类名 String - -
customStyle 定义需要用到的外部样式 Object {} -

# Table Column Events

事件名称 说明 回调参数
cell-click 单元格点击事件 { row, column, rowIndex, columnIndex, value }

# Table Column Slots

插槽名称 说明 参数
default 自定义列的内容 { row, column, index, value }
header 自定义表头的内容 { column, index }

# 注意事项

  1. u-table-column组件必须作为u-table的直接子组件使用
  2. 表格数据更新时会自动重新渲染
  3. 在小程序中使用时，建议合理设置表格高度以获得更好的性能
  4. 合并单元格功能注意事项：
    • spanMethod 函数的返回值中，rowspan 和 colspan 为 0 时表示隐藏该单元格
    • 合并的单元格会自动调整高度，无需手动设置样式
    • 建议按从上到下、从左到右的顺序进行合并配置
    • 被合并隐藏的单元格无法触发点击事件
    • 合并功能与排序、选择等功能完全兼容
  5. 表尾合计行功能注意事项：
    • 合计行只在有数据时显示，空数据状态下不显示
    • summaryMethod 函数优先级高于 summaryColumns 配置
    • 如果 summaryColumns 为空数组，则自动合计所有数字列
    • 合计行会自动适配表格的布局和样式
    • 合计功能与排序、多选、合并单元格等功能完全兼容
    • 当表格设置了固定高度时，合计行会自动调整表体的滚动区域

← CountDown 倒计时 →