行高亮

使用 row-config.isHover 属性启用 hover 行高亮

<template>
  <div>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      :row-config="{isHover: true}"
      :data="tableData">
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="address" title="Address"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
  }
}
</script>

尺寸

可以设置大小尺寸：medium / small / mini
可以通过 scss 变量修改相关样式，查看所有变量

<vxe-table border size="medium" :data="tableData">

序号列

设置 type=seq 开启序号列

<vxe-column type="seq" width="60"></vxe-column>

使用 seq-config={startIndex} 自定义起始序号

<vxe-table border height="300" :row-config="{isHover: true}" :seq-config="{startIndex: 100}" :data="tableData">

使用 seq-config={seqMethod} 自定义方法

<template>
  <div>
    <vxe-table
      border
      height="300"
      :row-config="{isHover: true}"
      :seq-config="seqConfig"
      :data="tableData">
      <vxe-column type="seq" title="序号" width="80"></vxe-column>
      <vxe-column field="name" title="Name" sortable></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ],
      seqConfig: {
        seqMethod ({ rowIndex }) {
          return `NO${rowIndex + 1000}`
        }
      }
    }
  }
}
</script>

列宽

列宽，通过设置 width 参数，支持固定像素、百分比、等比例分配等，如果不设置则按照表格的宽度进行均匀分配
(注：不应该全部都使用固定像素，应该当所有列加起来的宽度小于表格宽度时，就会出现空白区，可以配合 "%" 或 "min-width" 实现等比例缩放)

    <vxe-table
      border
      :data="tableData">
      <vxe-column type="seq" width="80"></vxe-column>
      <vxe-column field="name" title="Name" min-width="200"></vxe-column>
      <vxe-column field="role" title="Role" min-width="140"></vxe-column>
      <vxe-column field="sex" title="Sex" min-width="120"></vxe-column>
      <vxe-column field="age" title="Age" min-width="120"></vxe-column>
    </vxe-table>
    
    <vxe-table border :data="tableData"> <vxe-column type="seq" width="10%"></vxe-column> <vxe-column field="name" title="Name" width="30%"></vxe-column> <vxe-column field="role" title="Role" width="20%"></vxe-column> <vxe-column field="sex" title="Sex" width="20%"></vxe-column> <vxe-column field="age" title="Age" width="20%"></vxe-column> </vxe-table>

单元格超出指定宽度自动换行，通过设置 scroll-y="{enabled: false} 关闭虚拟滚动，则支持自动换行

<vxe-table :data="tableData" :scroll-y="{enabled: false}">

通过 tooltip-config.showAll 开启全表工具提示，还可以配合 contentMethod 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息
还可以设置 tooltip-config.enterable 允许鼠标进入 tooltip 中，通过 title-help 设置列标题的帮助提示消息

<template>
  <div>
    <vxe-table
      show-footer
      :row-config="{useKey: true}"
      :column-config="{useKey: true}"
      :footer-method="footerMethod"
      :tooltip-config="tooltipConfig"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="名称" :title-help="{message: '自定义帮助提示信息'}"></vxe-column>
      <vxe-column field="role" title="角色" :title-help="{message: '自定义图标', icon: 'vxe-icon-question-circle-fill'}"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
      <vxe-column field="rate" title="Rate">
        <template #header>
          <span>自定义标题</span>
        </template>
      </vxe-column>
      <vxe-column field="address" title="Address" width="160"></vxe-column>
      <vxe-column type="html" field="content" title="Content" width="200"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { name: 'Test1', role: '前端', date: '2020-02-28', rate: 5, address: 'address1', content: 'xxxxx1<br>换行换行11111111111' },
        { name: 'Test2', role: '后端', date: '2020-02-22', rate: 2, address: 'address2\ntooltip文本换行\n换行xx', content: 'xxxxx1<br>换行换行2' },
        { name: 'Test3', role: '前端', date: '2020-01-01', rate: 0, address: 'address3\ntooltip文本换行\n换行xx', content: 'xxxxx1<br>换行换行<br>3333' },
        { name: 'Test4', role: '设计师', date: '2020-02-23', rate: 1, address: 'address4', content: 'xxxxx1<br>换行换行4' },
        { name: 'Test5', role: '前端', date: '2020-01-20', rate: 3, address: 'address5\ntooltip文本换行\n换行xx', content: 'xxxxx1<br>换行换行55' }
      ],
      tooltipConfig: {
        showAll: true,
        enterable: true,
        contentMethod: ({ type, column, row, items, _columnIndex }) => {
          const { field } = column
          // 重写默认的提示内容
          if (field === 'role' || field === 'date') {
            if (type === 'header') {
              return column.title ? '自定义标题提示内容：' + column.title : ''
            } else if (type === 'footer') {
              return items[_columnIndex] ? '自定义表尾提示内容，\n并且自定义换行：\n' + items[_columnIndex] : ''
            }
            return row[field] ? '自定义提示内容：' + row[field] : ''
          } else if (field === 'rate') {
            // 返回空字符串，控制单元格不显示提示内容
            return ''
          }
          // 其余的单元格使用默认行为
          return null
        }
      }
    }
  },
  methods: {
    footerMethod ({ columns }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          }
          if (['date'].includes(column.field)) {
            return '2020-09-05'
          }
          if (['rate'].includes(column.field)) {
            return 999.8
          }
          return null
        })
      ]
      return footerData
    }
  }
}
</script>