element/table.md at c02809c4afbafd6fadc9e7f632463ec94c683c6f

test/element

Fork 0

mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +08:00

Leopoldthecoder 0b91eafb1b update Badge/Pagination/Progress/Table/Tag/Tree doc

2016-09-08 09:15:52 +08:00

21 KiB

Raw Blame History

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础表格

基础的表格展示用法。

:::demo 当el-table元素中注入data对象数组后，在el-table-column中用property属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

  <template>
    <el-table
      :data="tableData"
      style="width: 520px">
      <el-table-column
        property="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        property="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

:::

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

:::demo stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 520px">
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

:::

带边框表格

:::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

<template>
  <el-table
    :data="tableData"
    border
    style="width: 520px">
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

:::

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

:::demo 为行添加自定义背景色，表明该行处于某种状态。若某一行拥有custom-criteria数组中的某个字段且值为true，则为该行添加custom-background-colors数组中对应的背景色。

<template>
  <el-table
    :data="tableData2"
    style="width: 520px"
    :custom-criteria="['$info', '$positive']"
    :custom-background-colors="['#C9E5F5', '#E2F0E4']">
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          $info: true
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          $positive: true
        }]
      }
    }
  }
</script>

:::

固定表头

纵向内容过多时，可选择固定表头。

:::demo 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

<template>
  <el-table
    :data="tableData3"
    height="250"
    border
    style="width: 520px">
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

:::

固定列

横向内容过多时，可选择固定首列。

:::demo 固定列需要使用fixed-column-count属性，它接受一个Number，表示左起要固定的列数。

<template>
  <el-table
    :data="tableData"
    :fixed-column-count="1"
    border
    style="width: 500px">
    <el-table-column
      property="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="300">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址"
      width="300">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

:::

固定列和表头

横纵内容过多时，可选择固定列和表头。

:::demo 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

<template>
  <el-table
    :data="tableData3"
    :fixed-column-count="1"
    border
    style="width: 500px"
    height="250">
    <el-table-column
      property="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="300">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址"
      width="300">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

:::

单选

选择单行数据时使用色块表示。

:::demo Table 组件提供了选择的支持，只需要配置selection-mode属性即可实现单选（single）、多选（multiple)，如果不需要则设置为none。之后由selectionchange事件来管理选中时触发的事件，它会传入一个value，value为生成表格时的对应对象。本例中还使用了allow-no-selection属性，它接受一个Boolean，若为true，则允许为空，默认为false，此时将会产生默认值，为填入数组的第一个对象。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

<template>
  <el-table
    :data="tableData"
    selection-mode="single"
    @selectionchange="handleSelectionChange"
    style="width: 520px"
    allow-no-selection>
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        singleSelection: {}
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.singleSelection = val;
      }
    }
  }
</script>

:::

多选

选择多行数据时使用 Checkbox。

:::demo 除了selection-mode的设置外，多选与单选并没有太大差别，只是传入selectionchange事件中的参数从对象变成了对象数组。此外，需要提供一个列来显示多选框: 手动添加一个el-table-column，设type属性为selection即可。在本例中，为了方便说明其他属性，我们还使用了inline-template和show-tooltip-when-overflow：设置了inline-template属性后，可以通过调用row对象中的值取代property属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-tooltip-when-overflow属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<template>
  <el-table
    :data="tableData3"
    selection-mode="multiple"
    style="width: 420px"
    @selectionchange="handleMultipleSelectionChange">
    <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column
      inline-template
      label="日期"
      width="120">
      <div>{{ row.date }}</div>
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址"
      show-tooltip-when-overflow>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

:::

排序

对表格进行排序，可快速查找或对比数据。

:::demo 在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

<template>
  <el-table
    :data="tableData"
    border
    style="width: 520px">
    <el-table-column
      property="date"
      label="日期"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

:::

Table Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
height	table 的高度，默认高度为空，即自动高度	string	—	—
stripe	是否为斑马纹 table	boolean	—	false
border	是否带有纵向边框	boolean	—	false
selection-mode	列表项选择模式	string	single/multiple/none	none
allow-no-selection	单选模式是否允许选项为空	boolean	—	false
fixed-column-count	固定列的个数	number	—	0

Table Events

事件名	说明	参数
selectionchange	当选择项发生变化时会触发该事件	selected
cellmouseenter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cellmouseleave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cellclick	当某个单元格被点击时会触发该事件	row, column, cell, event

Table-column Attributes

参数	说明	类型	可选值	默认值
label	显示的标题	string	—	—
property	对应列内容的字段名	string	—	—
width	对应列的宽度	string	—	—
sortable	对应列是否可以排序	boolean	—	false
type	对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算）	string	selection/index	—
formatter	用来格式化内容，在 formatter 执行的时候，会传入 row 和 column	function	—	—
show-tooltip-when-overflow	当过长被隐藏时显示 tooltip	Boolean	—	false
inline-template	指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性	—	—

21 KiB Raw Blame History Unescape Escape