WinDesign

# Table 表格

# 代码演示

WARNING

以下示例中的 滚动条样式 是调整之后的，如需使用，请参考以下代码




 

















::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
  border-radius: 8px;
  background-clip: padding-box;
  border: 4px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #828282;
}

::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #fafafa;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

固定行和列

为表格设置 height即可固定表头, 有时候表格太长出现横向滚动条时, 为重要的列设置 fixed即可固定它. fixed 默认固定在表格左边, 也可以设置 middle、 right。 特别注意：当设置 fixed 列并需要根据 ref 操作dom 元素时，需要将slot 的元素使用 v-for语法将 ref 转为数组形式，选择第一个 ref 为目标 dom，这是为了避免 fixed 部分的table与非 fixed 部分的 table 之间发生元素 ref 同名覆盖的情况，最终导致 dom 元素获取不准确的问题。

查看代码 

<template>
  <section class="component-anchor message-demo">
      <w-table :data="tableData" border height="210" style="width: 100%">
        <w-table-column
          fixed="left"
          prop="name"
          label="药品"
          width="180"
        ></w-table-column>
        <w-table-column prop="nick" label="别名" width="220"></w-table-column>
        <w-table-column prop="price" label="单价" width="150"></w-table-column>
        <w-table-column prop="number" label="库存" width="150"></w-table-column>
        <w-table-column
          prop="type"
          label="药品类型"
          width="150"
        ></w-table-column>
        <w-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <w-button type="text" size="small">
              查看
            </w-button>
            <w-button type="text" size="small">编辑</w-button>
          </template>
        </w-table-column>
      </w-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            number: 789,
            type: '西药',
            price: '13.25',
            name: '氯芬黄敏片',
            nick: '感冒通'
          },
          {
            number: 613,
            type: '西药',
            price: '25.5',
            name: '糠甾醇',
            nick: '牙周宁'
          },
          {
            number: 999,
            type: '西药',
            price: '56',
            name: '克仑特罗',
            nick: '咳喘素'
          },
          {
            number: 256,
            type: '西药',
            price: '26',
            name: '氯芬黄敏片',
            nick: '感冒通'
          },
          {
            number: 666,
            type: '西药',
            price: '33',
            name: '枸橼酸喷托维林',
            nick: '咳必清'
          },
          {
            number: 568,
            type: '西药',
            price: '29',
            name: '复方鲜竹沥',
            nick: '去痰灵'
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style lang="scss">
  table {
    margin: 0;
    display: table;
  }
</style>

滚动加载

监听table的纵向滚动条, 可以用于实现滚动加载功能. 有关滚动的事件有scrollToUpper、scrollToLower, 分别是滚动到table顶部、底部时会触发的事件.upperThreshold、lowerThreshold参数可以调整以上2种事件触发的条件。

查看代码 

<template>
  <section class="component-anchor message-demo">
      <w-table
        v-win-loading="loading"
        loading-spinner="w-icon-loading2"
        :data="tableData"
        height="200"
        style="width: 100%"
        :lower-threshold="10"
        border
        @scroll-to-lower="scrollToLower"
      >
        <w-table-column prop="name" label="药品"></w-table-column>
        <w-table-column prop="nick" label="别名" width="180"></w-table-column>
        <w-table-column prop="price" label="单价" width="150"></w-table-column>
        <w-table-column prop="number" label="库存" width="150"></w-table-column>
        <w-table-column prop="type" label="药品类型"></w-table-column>
      </w-table>
  </section>
</template>

<script>
  import { debounce } from 'throttle-debounce'

  export default {
    data() {
      return {
        loading: false,
        scrollToLower: () => {},
        tableData: [
          {
            number: 789,
            type: '西药',
            price: '13.25',
            name: '氯芬黄敏片',
            nick: '感冒通'
          },
          {
            number: 613,
            type: '西药',
            price: '25.5',
            name: '糠甾醇',
            nick: '牙周宁'
          },
          {
            number: 999,
            type: '西药',
            price: '56',
            name: '克仑特罗',
            nick: '咳喘素'
          },
          {
            number: 256,
            type: '西药',
            price: '26',
            name: '氯芬黄敏片',
            nick: '感冒通'
          },
          {
            number: 666,
            type: '西药',
            price: '33',
            name: '枸橼酸喷托维林',
            nick: '咳必清'
          },
          {
            number: 568,
            type: '西药',
            price: '29',
            name: '复方鲜竹沥',
            nick: '去痰灵'
          }
        ]
      }
    },
    methods: {
      fetchData() {
        this.loading = true
        setTimeout(() => {
          this.tableData.push({
            number: this.tableData.length,
            type: '西药',
            price: '29',
            name: '复方鲜竹沥' + this.tableData.length,
            nick: '去痰灵'
          })
          this.loading = false
        }, 600)
      }
    },
    mounted() {
      // import { debounce } from 'throttle-debounce'
      this.scrollToLower = debounce(200, this.fetchData)
    }
  }
</script>

<style lang="scss">
  table {
    margin: 0;
    display: table;
  }
</style>

流动高度

为表格设置 height即可固定表头, 有时候表格太长出现横向滚动条时, 为重要的列设置 fixed即可固定它. fixed 默认固定在表格左边, 也可以设置 middle、 right。

查看代码 

<template>
  <section class="component-anchor table-float-demo">
      <w-radio-group v-model="height">
        <w-radio label="300">300px</w-radio>
        <w-radio label="120">150px</w-radio>
      </w-radio-group>
      <w-table
        style="width: 100%; margin-top: 16px;"
        border
        :data="tableData"
        :max-height="height"
      >
        <w-table-column
          prop="date"
          label="就诊日期"
          width="180"
        ></w-table-column>
        <w-table-column prop="name" label="姓名" width="180"></w-table-column>
        <w-table-column prop="address" label="地址"></w-table-column>
      </w-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        height: '300',
        tableData: [
          {
            date: '2019-01-02',
            name: '任芬芳',
            address: '合肥市蜀山区长江西路233号'
          },
          {
            date: '2019-01-03',
            name: '张琪',
            address: '合肥市蜀山区长江西路233号'
          },
          {
            date: '2019-01-04',
            name: '周晓燕',
            address: '合肥市蜀山区长江西路233号'
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style lang="scss">
  table {
    margin: 0;
    display: table;
  }
</style>

# API

# Table Attributes

参数 说明 类型 可选值 默认值 Version
border 是否带有纵向边框 Boolean — false
current-row-key 当前行的 key，只写属性 String,Number — —
cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex}) | String — —
cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex}) | Object — —
data 显示的数据 Array — —
default-expand-all 是否默认展开所有行，只有当 table 存在展开行或者为树形结构表格时生效 Boolean — false
default-sort 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 Object order: ascending, descending 如果只指定了prop, 没有指定order, 则默认顺序是 ascending
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 String — 暂无数据
max-height Table 的最大高度。合法的值为数字或者单位为 px 的高度。 String | Number — —
expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 Array —
fit 列的宽度是否自撑开 Boolean — true
height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 String | Number — —
highlight-current-row 是否要高亮当前行 Boolean — false
header-row-class-name 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 Function({row, rowIndex}) | String — —
header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 Function({row, rowIndex}) | Object — —
header-cell-class-name 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex}) | String — —
header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex}) | Object — —
indent 树形 table 中树节点的缩进距离 Number — 16 v1.7.0
lazy 是否懒加载子节点数据 Boolean — — v1.7.0
load 树形 table 中，用于加载子节点数据的函数，仅当 lazy 为 true 时生效 Function(row, treeNode, resolve) — — v1.7.0
lower-threshold 距 table 底部多少距离时（单位 px），触发 scrollToLower 事件 Number — 0 v2.0.9
row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex}) | String — —
row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 Function({row, rowIndex}) | Object — —
row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形结构数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 Function(row) | String — —
show-header 是否显示表头 Boolean — true
scrollbar-width 指定滚动条宽度（可在自定义滚动条宽度的情况下，gutter 宽度计算失败时使用） Number — — v2.0.9
size Table 的尺寸 String 'medium' | 'small' | 'mini' —
stripe 是否为斑马纹 table Boolean — false
show-summary 是否在表尾显示合计行 Boolean — false
sum-text 合计行第一列的文本 String — 合计
summary-method 自定义的合计计算方法 Function({ columns, data }) — —
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 Boolean — true
sticky-header 表头是否吸顶 Boolean — false v2.0.9
sticky-top-offset 表头距 window 顶部边缘的高度 Number — 0 v2.0.9
sticky-footer 汇总区域是否悬浮在底部 Boolean — false v2.0.9
sticky-bottom-offset 汇总区域距 window 底部边缘的高度 Number — 0 v2.0.9
tree-props 渲染树形结构数据的配置选项 Object — { hasChildren: 'hasChildren', children: 'children' } v1.7.0
tree-expand-icon 自定义树形结构数据展开折叠 icon String[] — [unexpendedIcon, expendedIcon] v2.0.0
show-connection 是否展示树形结构数据根节点连接线 Boolean — false v2.0.9
tooltip-effect tooltip theme 属性 String 'dark' | 'light' —
tooltip-max-width tooltip max-width 属性 String — —
upper-threshold 距 table 顶部多少距离时（单位 px），触发 scroll-to-upper 事件 Number — 0 v2.0.9

# Table Events

事件名 说明 参数 Version
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
current-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
expand-change 当用户对某一行展开或者关闭的时候会触发该事件(第二个参数存在 2 种回调结果，当展开行时返回的是 expandedRows, 树形结构数据展开时是 expanded) row, (expandedRows | expanded) v1.7.0
filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 filters
header-click 当某一列的表头被点击时会触发该事件 column, event
header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event
header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event
row-click 当某一行被点击时会触发该事件 row, event, column
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, event
row-dblclick 当某一行被双击时会触发该事件 row, event
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
scroll-to-upper 纵向滚动到 table 顶部时触发 event v2.0.9
scroll-to-lower 纵向滚动到 table 底部时触发 event v2.0.9

# Table Methods

方法名 说明 参数 Version
clearSelection 用于多选表格，清空用户的选择 —
clearSort 用于清空排序条件，数据会恢复成未排序的状态 —
clearFilter 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件 columnKey
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 —
setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 row
sort 手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。 prop: String, order: String
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected
toggleAllSelection 用于多选表格，切换所有行的选中状态 —
toggleRowExpansion 用于可展开表格与树形结构表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） row, expanded

# Table Slot

name 说明 Version
append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。

# Table-column Attributes

参数 说明 类型 可选值 默认值 Version
align 对齐方式 String 'left' | 'center' | 'right' 'left'
column-key column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 String — —
class-name 列的 className String — —
expand-icon 收起与展开的触发图标 Array [unexpendedIcon, expendedIcon] v2.0.9
formatter 用来格式化内容 Function(row, column, cellValue, index) — —
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 String, Boolean true | 'left' | 'right' —
filters 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 Array[{ text, value }] — —
filter-placement 过滤弹出框的定位 String 与 Tooltip 的 placement 属性相同 —
filter-multiple 数据过滤的选项是否多选 Boolean — true
filter-method 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 Function(value, row, column) — —
filtered-value 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 Array — —
header-align 表头对齐方式，若不设置该项，则使用表格的对齐方式 String 'left' | 'center' | 'right' —
index 如果设置了 type=index，可以通过传递 index 属性来自定义索引 number, Function(index) — —
label 显示的标题 String — —
label-class-name 当前列标题的自定义类名 String — —
line-clamp 多行溢出行数(适用于行数大于 1 行的多行文本溢出样式控制需求, -webkit-line-clamp 存在兼容性问题, 仅 Chrome 内核浏览器兼容良好, 请谨慎使用) Number — — v2.0.12
min-width 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 String — —
prop 对应列内容的字段名，也可以使用 property 属性 String — —
resizable 对应列是否可以通过拖动改变宽度（需要在 w-table 上设置 border 属性为真） Boolean — true
render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — —
reserve-selection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） Boolean — false
show-overflow-tooltip 当内容过长被隐藏时显示 tooltip Boolean — false
sort-method 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 Function(a, b) — —
sort-by 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 String/Array/Function(row, index) — —
sort-orders 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 Array 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序 ['ascending', 'descending', null]
sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 Boolean, String true | false | 'custom' false
selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) — —
type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 String 'selection' | 'index' | 'expand' —
width 对应列的宽度 String — —

# Table-column Scoped Slot

name 说明 Version
— 自定义列的内容，参数为 { row, column, $index }
header 自定义表头的内容. 参数为 { column, $index }
上次更新: 5/9/2023, 10:12:46 AM

← Virtualized Table 虚拟化表格 →