Data-table表格

旧城等待， 2022-04-10 13:26 499阅读 0赞

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

**1、基础表格**  
当el-table元素中注入data对象数组后（多行数据存成一维数组格式，但每一行数据存成对象，每一行的数据格式键名要相同，不能处理成多维数组的格式，prop属性可以动态绑定），  
在el-table-column中用prop属性来对应对象中的键名即可填入数据，  
用label属性来定义表格的列名。可以使用width属性来定义列宽。  
默认情况下，Table 组件是不具有竖直方向的边框的（只有横向），如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

<el-table
        :data="tableData"
        style="width: 80%"
        border>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    <script>
      new Vue({
        el: '#app',
        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>

<el-table
        :data="tableData2"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>

**3、fixed属性**

横向内容过多时，可选择固定列。（该列数据会一直可见显示）  
固定列需要使用fixed属性，它接受 Boolean 值或者left，right，表示左边固定还是右边固定。

4、

<el-table
      :data="tableData4"
      style="width: 100%"
      max-height="250">
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData4)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    }

<el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%">
      <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>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div>

<el-table
      ref="multipleTable"
      :data="tableData3"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{
       { scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip
        width="240">
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>

<el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions>{
       {scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>

<el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{
       { scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {
       { scope.row.name }}</p>
              <p>住址: {
       { scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{
       { scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

<el-table
        :data="tableData5"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{
       { props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{
       { props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{
       { props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{
       { props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{
       { props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{
       { props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{
       { props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="desc">
        </el-table-column>
      </el-table>

<el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column
        label="Date"
        prop="date">
      </el-table-column>
      <el-table-column
        label="Name"
        prop="name">
      </el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

<div>
      <el-table
        :data="tableData6"
        :span-method="arraySpanMethod"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          sortable
          label="数值 1">
        </el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="数值 2">
        </el-table-column>
        <el-table-column
          prop="amount3"
          sortable
          label="数值 3">
        </el-table-column>
      </el-table>
    
      <el-table
        :data="tableData6"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="数值 1（元）">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="数值 2（元）">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="数值 3（元）">
        </el-table-column>
      </el-table>
    </div>

### Table Attributes ###

<table> 
 <thead> 
  <tr> 
   <th style="width:138px;">参数</th> 
   <th style="width:280px;">说明</th> 
   <th style="width:196px;">类型</th> 
   <th style="width:84px;">可选值</th> 
   <th style="width:151px;">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:138px;">：data</td> 
   <td style="width:280px;">显示的数据</td> 
   <td style="width:196px;">array（元素一般为对象格式）</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">border</td> 
   <td style="width:280px;">是否带有纵向边框</td> 
   <td style="width:196px;">boolean</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">false</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">：row-class-name</td> 
   <td style="width:280px;">行的 className 的回调方法（返回一个字符串对应某个样式名，比如返回warning-row对应，.el-table .warning-row<br> ），也可以使用字符串为所有行设置一个固定的 className。</td> 
   <td style="width:196px;">Function({row, rowIndex})/String</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">height</td> 
   <td style="width:280px;"> <p>Table 的高度，默认为自动高度。如果 height 为 number 类型（比如250），单位 px；</p> <p>纵向内容过多时，可选择固定表头。(出现滚动条，表头会一直出现在视野)<br> 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码</p> </td> 
   <td style="width:196px;">string/number</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">max-height</td> 
   <td style="width:280px;">Table 的最大高度（数据量动态变化时使用）</td> 
   <td style="width:196px;">string/number</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">highlight-current-row</td> 
   <td style="width:280px;">是否要高亮当前行，该属性用于实现单选，配合current-change事件</td> 
   <td style="width:196px;">boolean</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">false</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">：default-sort</td> 
   <td style="width:280px;">默认的排序列的 prop 和顺序。它的<code>prop</code>属性指定默认的排序的列，<code>order</code>指定默认排序的顺序</td> 
   <td style="width:196px;">Object</td> 
   <td style="width:84px;"><code>order</code>: ascending, descending</td> 
   <td style="width:151px;">如果只指定了<code>prop</code>, 没有指定<code>order</code>, 则默认顺序是ascending</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">tooltip-effect</td> 
   <td style="width:280px;">tooltip&nbsp;<code>effect</code>&nbsp;属性，单行显示内容配合<code>show-overflow-tooltip</code>属性使用</td> 
   <td style="width:196px;">String</td> 
   <td style="width:84px;">dark/light</td> 
   <td style="width:151px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">show-summary</td> 
   <td style="width:280px;">是否在表尾显示合计行</td> 
   <td style="width:196px;">Boolean</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">false</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">：summary-method</td> 
   <td style="width:280px;">自定义的合计计算方法</td> 
   <td style="width:196px;">Function({ columns, data })</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">：span-method</td> 
   <td style="width:280px;">合并行或列的计算方法</td> 
   <td style="width:196px;">Function({ row, column, rowIndex, columnIndex })</td> 
   <td style="width:84px;">—</td> 
   <td style="width:151px;">—</td> 
  </tr> 
 </tbody> 
</table>

### Table Events ###

<table> 
 <thead> 
  <tr> 
   <th style="width:144px;">事件名</th> 
   <th style="width:450px;">说明</th> 
   <th style="width:255px;">参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:144px;">@selection-change</td> 
   <td style="width:450px;">当选择项发生变化时会触发该事件（用于表哥多选时）</td> 
   <td style="width:255px;">selection</td> 
  </tr> 
  <tr> 
   <td style="width:144px;">@current-change</td> 
   <td style="width:450px;">用于实现单选。当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性</td> 
   <td style="width:255px;">currentRow, oldCurrentRow</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1]Table Methods ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clearSelection</td> 
   <td>用于多选表格，清空用户的选择</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>toggleRowSelection</td> 
   <td>用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）</td> 
   <td>row, selected</td> 
  </tr> 
  <tr> 
   <td>setCurrentRow</td> 
   <td>用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。</td> 
   <td>row</td> 
  </tr> 
  <tr> 
   <td>clearFilter</td> 
   <td>不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件</td> 
   <td>columnKey</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 2]Table-column Attributes ###

<table> 
 <thead> 
  <tr> 
   <th style="width:121px;">参数</th> 
   <th style="width:394px;">说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:121px;">label</td> 
   <td style="width:394px;">显示的标题（表格第一行显示的th标题）</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">prop</td> 
   <td style="width:394px;">对应列内容的字段名（绑定到列数据对象中的键名）</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">width</td> 
   <td style="width:394px;">对应列的宽度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">type</td> 
   <td style="width:394px;">对应列的类型。如果设置了&nbsp;<code>selection</code>&nbsp;则显示多选框；如果设置了&nbsp;<code>index</code>&nbsp;则显示该行的索引（从 1 开始计算）；如果设置了&nbsp;<code>expand</code>&nbsp;则显示为一个可展开的按钮</td> 
   <td>string</td> 
   <td>selection/index/expand</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">column-key</td> 
   <td style="width:394px;">column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">fixed</td> 
   <td style="width:394px;">列是否固定在左侧或者右侧，true 表示固定在左侧</td> 
   <td>string, boolean</td> 
   <td>true, left, right</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">sortable</td> 
   <td style="width:394px;">对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件</td> 
   <td>boolean, string</td> 
   <td>true, false, 'custom'</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">：formatter</td> 
   <td style="width:394px;">用来格式化内容</td> 
   <td>Function(row, column, cellValue, index)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">show-overflow-tooltip</td> 
   <td style="width:394px;">当内容过长被隐藏时显示 tooltip</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">align</td> 
   <td style="width:394px;">对齐方式</td> 
   <td>String</td> 
   <td>left/center/right</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">：filters</td> 
   <td style="width:394px;">数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。</td> 
   <td>Array[{ text, value }]</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">filter-placement</td> 
   <td style="width:394px;">过滤弹出框的定位</td> 
   <td>String</td> 
   <td>与 Tooltip 的&nbsp;<code>placement</code>属性相同</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">：filter-method</td> 
   <td style="width:394px;">数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。</td> 
   <td>Function(value, row, column)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 3]Table-column Scoped Slot ###

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—&lt;template slot-scope="scope"&gt;</td> 
   <td>自定义列的内容，参数为 { row, column, $index }</td> 
  </tr> 
  <tr> 
   <td>header（&lt;template slot="header" slot-scope="scope"&gt;）</td> 
   <td>自定义表头的内容. 参数为 { column, $index }</td> 
  </tr> 
 </tbody> 
</table>

<template slot-scope="props"> 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能

### 实例  ###

//1.切换行的样式
    :row-class-name="tableRowClassName"
    <script> 
       tableRowClassName({ row, rowIndex }) {
          if (row.lock_status == 0) {//eslint-disable-line
            return 'lock-row'
          }
        }
    <style>
      .el-table .lock-row {
        background: #80808021;
      }
    </style>
    </script>

//2.控制表头的样式
    :header-cell-style="rowClass"
    <script>
        rowClass({ row, column, rowIndex, columnIndex }) {
          return 'text-align: center;'
        },
    </script>

//3、控制单元格的样式
    :cell-style="cellStyle"
    <script>
        cellStyle({ row, column, rowIndex, columnIndex }) {
          return 'text-align: center;'
        }
    </script>

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/table%23table-methods
[Link 2]: http://element-cn.eleme.io/#/zh-CN/component/table%23table-column-attributes
[Link 3]: http://element-cn.eleme.io/#/zh-CN/component/table%23table-column-scoped-slot