WinDesign

# Table 表格 UPDATE

用于数据的展示， 可对数据进行排序、筛选、对比、自定义操作等复杂行为。

# 代码演示

🎉 Features

V2.3.9 新增属性 horizontal-scroll 开启底部模拟横向滚动条，解决当表格的宽度超出浏览器宽度时，虽然 w-table 底部会出现滚动条，但是每次需要先滚动到底部，才能使用 w-table 的滚动体，因此当 w-table 的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条。（参考网站 Demo 或咨询开发者）

V2.4.1 新增属性 settings 在表头新增可设置功能，配置表格列的隐藏/显示、宽度、顺序。

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%" @header-dragend="handleHeaderDragend">
        <w-table-column
          width="180"
          prop="name"
          fixed="left"
          label="药品名称"
        ></w-table-column>
        <w-table-column width="180" prop="size" label="规格"></w-table-column>
        <w-table-column prop="unit" label="单位"></w-table-column>
        <w-table-column prop="count" label="数量"></w-table-column>
        <w-table-column
          prop="price"
          width="110"
          label="单价(元)"
          align="right"
        ></w-table-column>
        <w-table-column
          prop="total"
          width="110"
          label="金额(元)"
          align="right"
        ></w-table-column>
        <w-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <w-button type="text" padding-less>
              查看
            </w-button>
            <w-button type="text" padding-less>编辑</w-button>
          </template>
        </w-table-column>
      </w-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: '炔诺酮片',
            size: '625微克/片',
            count: '10',
            unit: '片',
            price: '10.00',
            total: '100.00'
          },
          {
            name: '扶达胶囊',
            size: '100毫克/粒',
            count: '5',
            unit: '粒',
            price: '12.00',
            total: '60.00'
          },
          {
            name: '百士欣胶囊',
            size: '10毫克/粒',
            count: '2',
            unit: '粒',
            price: '22.50',
            total: '45.00'
          },
          {
            name: '别嘌醇片',
            size: '100毫克/片',
            count: '10',
            unit: '片',
            price: '14.50',
            total: '145.00'
          },
          {
            name: '复方维生素注射液',
            size: '2毫升/支',
            count: '10',
            unit: '支',
            price: '12.73',
            total: '127.30'
          }
        ]
      }
    },
    methods: {
      handleHeaderDragend() {
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      }
    }
  }
</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="size" label="规格"></w-table-column>
        <w-table-column prop="count" label="数量"></w-table-column>
        <w-table-column
          prop="price"
          label="单价(元)"
          align="right"
        ></w-table-column>
        <w-table-column
          prop="total"
          label="金额(元)"
          align="right"
        ></w-table-column>
      </w-table>
  </section>
</template>

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

  export default {
    data() {
      return {
        loading: false,
        scrollToLower: () => {},
        tableData: [
          {
            name: '炔诺酮片',
            size: '625微克/片',
            count: '10',
            unit: '片',
            price: '10.00',
            total: '100.00',
            note:
              '炔诺酮片有较强的孕激素样作用，能使子宫内膜转化为蜕膜样变，其抑制垂体分泌促性腺激素作用呈明显剂量关系，并有一定的抗雌激素作用，具有较弱的雄激素活性和蛋白同化作用，用于月经不调、子宫功能性出血、子宫内膜异位症等；单方或与雌激素合用能抑制排卵，作避孕药。(来源于「百度健康医典」)'
          },
          {
            name: '扶达胶囊',
            size: '100毫克/粒',
            count: '5',
            unit: '粒',
            price: '12.00',
            total: '60.00',
            note: '-'
          },
          {
            name: '百士欣胶囊',
            size: '10毫克/粒',
            count: '2',
            unit: '粒',
            price: '22.50',
            total: '45.00',
            note: '-'
          },
          {
            name: '别嘌醇片',
            size: '100毫克/片',
            count: '10',
            unit: '片',
            price: '14.50',
            total: '145.00',
            note: '-'
          },
          {
            name: '复方维生素注射液',
            size: '2毫升/支',
            count: '10',
            unit: '支',
            price: '12.73',
            total: '127.30',
            note: '-'
          }
        ]
      }
    },
    methods: {
      fetchData() {
        this.loading = true
        setTimeout(() => {
          this.tableData.push({
            name: '药品名称' + this.tableData.length + 1,
            size: '-',
            count: '-',
            unit: '-',
            price: '-',
            total: '-',
          })
          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>

流动高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

查看代码 

<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="name" label="药品名称"></w-table-column>
        <w-table-column prop="size" label="规格"></w-table-column>
        <w-table-column prop="count" label="数量"></w-table-column>
        <w-table-column
          prop="price"
          label="单价(元)"
          align="right"
        ></w-table-column>
        <w-table-column
          prop="total"
          label="金额(元)"
          align="right"
        ></w-table-column>
      </w-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        height: '300',
        tableData: [
          {
            name: '炔诺酮片',
            size: '625微克/片',
            count: '10',
            unit: '片',
            price: '10.00',
            total: '100.00'
          },
          {
            name: '扶达胶囊',
            size: '100毫克/粒',
            count: '5',
            unit: '粒',
            price: '12.00',
            total: '60.00'
          },
          {
            name: '百士欣胶囊',
            size: '10毫克/粒',
            count: '2',
            unit: '粒',
            price: '22.50',
            total: '45.00'
          },
          {
            name: '别嘌醇片',
            size: '100毫克/片',
            count: '10',
            unit: '片',
            price: '14.50',
            total: '145.00'
          },
          {
            name: '复方维生素注射液',
            size: '2毫升/支',
            count: '10',
            unit: '支',
            price: '12.73',
            total: '127.30'
          }
        ]
      }
    },
    methods: {}
  }
</script>

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

表头、表尾悬浮

共 50 条
  • 1
  • 2
  • 3
  • 4
  • 5

查看代码 

<template>
  <section class="component-anchor message-demo">
    <w-table
        :data="tableData"
        border
        ref="table"
        style="width: 100%"
        :sticky-header="isHeaderSticky"
        :sticky-top-offset="topOffset"
        :sticky-footer="isFooterSticky"
        :sticky-bottom-offset="bottomOffset"
        show-summary
        :summary-method="getSummaries"
      >
        <w-table-column prop="name" label="药品名称"></w-table-column>
        <w-table-column prop="size" label="规格"></w-table-column>
        <w-table-column prop="count" label="数量"></w-table-column>
        <w-table-column
          prop="price"
          label="单价(元)"
          align="right"
        ></w-table-column>
        <w-table-column
          prop="total"
          label="金额(元)"
          align="right"
        ></w-table-column>
      </w-table>
      <div
        class="footer"
        :style="
          isFooterSticky
            ? {
                position: 'fixed',
                bottom: '0px',
                width: tableWidth + 'px'
              }
            : {}
        "
      >
        <w-pagination
          :current-pager="2"
          :total="50"
          :show="['prev', 'pager', 'next', 'total']"
        ></w-pagination>
      </div>
  </section>
</template>

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

  export default {
    data() {
      return {
        isHeaderSticky: false,
        isFooterSticky: false,
        topOffset: 60,
        bottomOffset: 48,
        tableWidth: 0,
        tableData: [
          {
            name: '炔诺酮片',
            size: '625微克/片',
            count: '10',
            unit: '片',
            price: '10.00',
            total: '100.00'
          },
          {
            name: '扶达胶囊',
            size: '100毫克/粒',
            count: '5',
            unit: '粒',
            price: '12.00',
            total: '60.00'
          },
          {
            name: '百士欣胶囊',
            size: '10毫克/粒',
            count: '2',
            unit: '粒',
            price: '22.50',
            total: '45.00'
          },
          {
            name: '别嘌醇片',
            size: '100毫克/片',
            count: '10',
            unit: '片',
            price: '14.50',
            total: '145.00'
          },
          {
            name: '复方维生素注射液',
            size: '2毫升/支',
            count: '10',
            unit: '支',
            price: '12.73',
            total: '127.30'
          }
        ]
      }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '汇总'
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          if (values.every((value) => isNaN(value))) {
            sums[index] = '—'
            return
          }
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            return !isNaN(value) ? prev + curr : prev
          }, 0)
          sums[index] = index !== 2 ? sums[index].toFixed(2) : sums[index]
        })
        return sums
      },
      getScrollTop() {
        let yOffset = window.pageYOffset
        if (typeof yOffset !== 'number') {
          yOffset = window.document.documentElement.scrollTop
        }
        return yOffset
      },
      getTopOffset(el) {
        if (!el) return
        let rect = el.getBoundingClientRect()
        let body = document.body
        let clientTop = el.clientTop || body.clientTop || 0
        let scrollTop = this.getScrollTop()
        return rect.bottom + scrollTop - clientTop
      },
      handleScroll() {
        const { table } = this.$refs
        if (!table) return
        const windowHeight = window.innerHeight
        const scrollTop = this.getScrollTop() + this.topOffset
        const headerEl = table.$el.querySelector('.w-table__header-wrapper')
        const headerHeight = headerEl ? headerEl.clientHeight * 1 : 0
        const tableTopOffset = this.getTopOffset(table.$el)
        const tableHeight = table.$el.offsetHeight
        this.tableWidth = table.$el.offsetWidth
        // 吸顶
        if (
          scrollTop + tableHeight >= tableTopOffset &&
          scrollTop < tableTopOffset - headerHeight
        ) {
          this.isHeaderSticky = true
        } else {
          this.isHeaderSticky = false
        }

        const yOffset =
          tableTopOffset +
          this.topOffset -
          (scrollTop + windowHeight) +
          this.bottomOffset

        // 吸底
        if (yOffset > 0 && yOffset <= tableHeight - headerHeight * 2) {
          this.isFooterSticky = true
        } else {
          this.isFooterSticky = false
        }
      }
    },
    mounted() {
      // 监听窗口滚动事件
      window.addEventListener('scroll', debounce(50, this.handleScroll), true)
    },
    beforeDestroy() {
      window.removeEventListener('scroll', debounce(50, this.handleScroll))
    }
  }
</script>

<style lang="scss">
.footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  z-index: 4;
}
</style>

# API

# Table Attributes

参数 说明 类型 可选值 默认值 Version
draggable-class 确定要使用拖拽排序的表格 String #app V2.2.9
draggable-row 开启行拖拽 Boolean true/false - V2.2.9
draggable-column 开启列拖拽 Boolean true/false - V2.2.9
draggable-selection 开启列拖拽时是否显示选中 Boolean true/false - V2.2.9
draggable-expand 开启列拖拽时是否显示展开/收起列 Boolean true/false - V2.2.14
draggable-other-columns 开启列拖拽时除了复选框还有哪些需要固定在左侧且禁止拖拽的列数量 Number - V2.2.14
draggable-column-data 列拖拽列表 Array - V2.2.9
border 是否带有纵向边框 Boolean — false
hover 是否悬浮行的时候显示背景色 Boolean — true V2.3.7
correct-hover 是否纠正合并列下鼠标悬浮背景色错乱的问题(没有默认纠正，是为了兼容开发者已经在项目中自行修复) Boolean — false V2.4.14
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
highlight-selection-row 是否要高亮复选框选中行（仅针对开启 selection 有效） boolean — false V2.4.37
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.4.32
tooltip-effect tooltip theme 属性 String 'dark' | 'light' —
tooltip-max-width tooltip max-width 属性 String — 400px V2.2.9
upper-threshold 距 table 顶部多少距离时（单位 px），触发 scroll-to-upper 事件 Number — 0 v2.0.9
horizontal-scroll 是否开启底部模拟横向滚动条 Boolean — false v2.3.9
horizontal-scroll-always 底部滚动条是否一直显示 Boolean — true v2.3.9
strictly-none-border 没有任何线条的表格 Boolean — false v2.4.10
empty 是否在空数据的时候显示占位符 Boolean — false v2.4.15
empty-type 占位符类型(参考 Empty 空状态 String — 'empty' v2.4.21
footer-row-class-name 表尾行的 className 的回调方法，也可以使用字符串为所有表尾行设置一个固定的 className。 Function({rowIndex}) | String — — V2.4.27
footer-row-style 表尾行的 style 的回调方法，也可以使用一个固定的 Object 为所有表尾行设置一样的 Style。 Function({rowIndex}) | Object — — V2.4.27
footer-cell-class-name 表尾单元格的 className 的回调方法，也可以使用字符串为所有表尾单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex}) | String — — V2.4.27
footer-cell-style 表尾单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表尾单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex}) | Object — — V2.4.27
autoTooltipWidth 是否在文本较长时关闭 tooltip-max-width false — — V2.4.37
header-span-method 表头合并列的计算方法 Function({ rowIndex,columnIndex,column }) — — V2.4.38

# Table Events

事件名 说明 参数 Version
row-drag-start 行拖拽开始时触发 { oldIndex } v2.2.9
row-drag-end 行拖拽结束时触发 data, { newIndex, oldIndex } v2.2.9
column-drag-move 列拖拽发 event v2.2.9
column-drag-end 列拖拽结束时触发 data, { oldIndex, newIndex } v2.2.9
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, column, event, rowIndex V2.4.5
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, event, rowIndex V2.4.5
row-dblclick 当某一行被双击时会触发该事件 row, event, rowIndex V2.4.5
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
summary-row-click 当表尾被点击时会触发该事件 row, column, event, index V2.4.10
summary-row-contextmenu 当表尾被鼠标右键点击时会触发该事件 row, column, event, index V2.4.10
summary-row-dblclick 当表尾被双击时会触发该事件 row, column, event, index V2.4.10

# 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 会位于合计行之上。
header-sticky 插入右侧设置按钮 V2.4.37

# 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 — —
settings 列的配置数据 Array — — V2.4.1
required 列的必填标志 Boolean — — V2.4.10
filter-icon 自定义筛选按钮 String — — V2.4.27
overflow-tooltip-format 自定义悬浮框内容 Function(row) — — V2.4.38

# Table-column Scoped Slot

name 说明 Version
— 自定义列的内容，参数为 { row, column, $index }
header 自定义表头的内容. 参数为 { column, $index }

# 常见问题

  • 1、缩放浏览器窗口报错：ResizeObserver loop completed with undelivered notifications
 


















 // vue.config.js

devServer: {
  client: {
      overlay: {
        warnings: false,
        runtimeErrors: (error) => {
          const ignoreErrors = [
            'ResizeObserver loop limit exceeded',
            'ResizeObserver loop completed with undelivered notifications.',
          ];
          if (ignoreErrors.includes(error.message)) {
            return false;
          }
        },
      },
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 2、切换页面或模块表格出现错乱
 

this.$refs.table.doLayout()
1
  • 3、自定义表头遇到数据不能更新等问题

1、slot="header" 是具名插槽，它占了这里的位置，this 指向 data, 但是 data 更新的时候，占位这个操作并不会再次重新占位，里面的数据并不会随着 data 更新；

2、slot-scope="scope" 是作用域插槽，在这个作用域内， this 指向 scope

3、slot="header" slot-scope="scope" 指向 data 里的数据，所以会随着 data 更新

 



<template slot="header" slot-scope="scope">
  // 代码
</template>
1
2
3

补充说明： 如果当前项目使用了 ESLint 插件，template 里并没有用到 slot-scope="scope" 中的 scope 而报错，可以简写具名插槽如：slot="header" 改成 #header 。

  • 4、表格中输入框无法聚焦
<w-table-column>
  <template slot-scope="{row, column}">
    <w-input :id="'自定义' + row.index + column.index"></w-input>
  </template>
</w-table-column>

<script>
  export default {
    data() {
      return {
        clickRowIndex: null, // 当前点击的行索引
        clickCellIndex: null, // 当前点击的列索引
      }
    },
    methods: {
      handleFocus() {
        this.$nextTick(() => {
          const target = document.getElementById(
            '自定义' + this.clickRowIndex + this.clickCellIndex
          )
          if (target) {
            target.focus();
          }
        });
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
上次更新: 1/6/2025, 9:35:47 AM

← Table-v2 虚拟化表格 🎉 →