Elementel-table表格使用详解，

3672Js.Com2024-04-11 02:27 来源:未知阅读:9471 关注度2

Elementel-table表格使用详解，

1. 前言

如果是开发功能型的网站，例如各类信息管理系统，那么表格的使用频率会相当之高。

实际上，我们的数据存储到数据库，不就是以表格的形式存在吗？所以在界面上显示、操作，使用表格来处理也是非常合理的。

本篇就来介绍下el-table表格组件的使用方法。

2. 基本用法

针对如下数据：

 	  tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }],

可以使用el-table将数据展示为表格，代码如下：

基本用法
    <el-table :data="tableData">
      <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>

解释下，el-table表示表格组件，data属性用来绑定数据列表。

el-table-column表示表格的一列，prop属性用于指定该列绑定数据列表的属性名，label是列的显示名称，width用于指定列宽度。

注意，一般最后一列的宽度我们不指定，这样的话可以自动占满剩余空间。

上述代码效果如下：

3. 显示斑马纹

为表格添加stripe属性，即可开启斑马纹，由于斑马纹效果较好，所以一般都是开启的。

 	显示斑马纹
    <el-table :data="tableData" stripe>
      <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>

效果如下：

4. 显示边框

边框就不用说了，基本所有表格，带上边框会效果更好一些。添加border属性即可显示边框：

带边框
    <el-table :data="tableData" 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>

效果如下，注意最外围的灰色框线，是我截图时候添加的，不是网页实际效果。

5. 自定义尺寸

通过将size设置为medium/small/mini，可以调整表格尺寸，例如mini：

自定义尺寸--medium / small / mini
    <el-table :data="tableData" size="mini" 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>

效果如下，很明显更加紧凑了。

6. 显示索引

可以添加一列，并将列类型设置为type，即可自动显示索引：

 	显示索引
    <el-table :data="tableData" border>
      <el-table-column label="序号" type="index" width="100">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="300">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="300">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
    </el-table>

效果：

7. 显示内容过长时的提示

当某列数据内容超过列宽度时，可以通过为列添加show-overflow-tooltip属性，展示提示信息。

  	显示内容过长时的提示
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="100" show-overflow-tooltip>
      </el-table-column>
    </el-table>

效果如下：

8. 自定义行样式

如果自带的样式无法满足需求，还可以自定义样式：

自定义行样式
    <el-table :data="tableData" border :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>

如上代码，行样式由tableRowClassName方法决定，代码如下：

tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'warning-row';
      } else if (rowIndex === 1) {
        return 'success-row';
      }
      return '';
    },

这样，第一行就会使用warning-row类，而第二行会采用success-row类，我们编写类样式代码如下：

<style>
.el-table .warning-row {
  background: wheat;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

最终效果如下：

9. 固定表头

如果表格行数较多，那么往下滚动界面时，会看不到表格的标题，这无疑是体验不佳的。el-table只需要设定一个高度，就能固定表头：

固定表头
    <el-table :data="tableData" border height="120">
      <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>

效果如下：

10. 固定列

当表格中列数过多时，el-table会展示横向滚动条，但是有时候我们希望一些列，如操作按钮所在的列，能够固定住，此时可以使用fixed属性：

固定列：
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="300">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="300">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

效果如下：

11. 多级表头

实际上多级表头el-table的实现非常简单，直接在el-table-column内部嵌套el-table-column即可。

数据部分：

 	  cityData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]

表格组件：

多级表头
    <el-table :data="cityData" border>
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

效果如下：

12. 展开行

有时候如果信息特别多，我们可以设计点击左侧按钮后，在当前行下方展示详细信息。

展开行
    <el-table :data="tableData" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="日期">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
    </el-table>

注意，展开行的类型需要为expand，然后可以通过slot-scope指定的props来取出当前行的数据，按照我们想要的方式展现即可。如上代码效果如下：

13. 自定义列模板

我们可以完全自定义列里面的显示内容：

 	自定义列模板
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          {{scope.row.date.replaceAll('-','')}}
        </template>
      </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-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="btnView(scope.row)" type="primary" size="small">查看</el-button>
          <el-button type="danger" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

如上代码中，我们通过在列中间添加如下内容，template中间的内容可以随意定制，而且可以通过scope.row拿到当前行的数据。

    	<template slot-scope="scope">
          {{scope.row.date.replaceAll('-','')}}
        </template>

效果如下：

14. 单选

通过添加highlight-current-row属性即可开启单选功能，然后可以通过@current-change指定选中项发生变化时触发的方法。

单选
    <el-table :data="tableData" border highlight-current-row @current-change="handleCurrentChange">
      <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>

 	handleCurrentChange(row) {
      console.log(row);
    },

效果如下：

15. 多选

可以通过添加type值为selection的列，来启用多选功能，然后@selection-change可以指定选中项变化时触发的方法。

多选(显示复选框)
    <el-table :data="tableData" ref="multipleTable" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="100">
      </el-table-column>
      <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>
    <div style="margin-top: 20px">
      <el-button @click="btnGetSelection()">获取选中项</el-button>
    </div>

JS代码如下：

handleSelectionChange(selection) {
      console.log(selection);
    },
    btnGetSelection() {
      let selection = this.$refs.multipleTable.selection;
      console.log(selection);
    }

上述代码中，通过this.$refs.multipleTable.selection可以获取到当前所有选中项信息，便于提交时使用。

16. 前端排序

el-table还支持前端排序，我们直接看演示代码：

前端排序
    <el-table :data="tableData" border :default-sort="{prop: 'date', order: 'descending'}">
      <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>

通过default-sort，指定了按date列排序，且是降序。所以效果如下：

17. 小结

el-table的功能还是相当全面的，本篇按我自己的理解讲解了一些经常会用到的用法，供大家参考。

到此这篇关于Element el-table 表格详解的文章就介绍到这了,更多相关Element el-table 表格内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例
vue element-ui实现el-table表格多选以及回显方式
el-element中el-table表格嵌套el-select实现动态选择对应值功能
关于Element-ui中el-table出现的表格错位问题解决
element el-table表格的二次封装实现(附表格高度自适应)
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。