vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Element el-table 表格

Element el-table 表格使用详解

作者：程序员大阳

我们的数据存储到数据库,不就是以表格的形式存在吗,所以在界面上显示、操作,使用表格来处理也是非常合理的,这篇文章给大家介绍Element el-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 表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文