脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue之ElementUI表格

vue基础之ElementUI表格详解

 更新时间：2022年02月05日 09:36:36   作者：jayLog  
这篇文章主要为大家详细介绍了vue的ElementUI表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

ElementUI 表格

前置工作： 安装好vue和elemetUI。如果是按需引入，请确保Table、TableColumn模块已经引入

示例：一个基本的表格

<template>
<el-table
          :data="tableData"
          stripe="true"
          style="width: 100%">
    <el-table-column
                     prop="name"
                     label="名称">
    </el-table-column>
    <el-table-column
                     prop="todayBuy"
                     label="日购买">
    </el-table-column>
    <el-table-column
                     prop="monthBuy"
                     label="月购买">
    </el-table-column>
    <el-table-column
                     prop="totalBuy"
                     label="总共购买">
    </el-table-column>
</el-table>
</template>
<script>
export default {
    name:"home",
    data(){
        return {
            tableData: [
            {
                name: 'oppo',
                todayBuy: 500,
                monthBuy: 3500,
                totalBuy: 22000
            },
            {
                name: 'vivo',
                todayBuy: 300,
                monthBuy: 2200,
                totalBuy: 24000
            }// ...
            ]
        }
    }
}
</script>

请添加图片描述

el-table的属性

属性属性值说明
stripebool是否使用斑马纹
borderbool是否使用边框
height数值固定表头。只要设置了属性，就会自动固定表头
max-height数值位表格设置最大高度

el-table-column的属性

属性属性值说明
fixedtrue(默认;左)|left|right固定栏，滚动的时候会浮动起来，可以选择浮在哪一边

如果我们希望通过行内的一些属性来对行做不同的显示，那么我们可以给el-table添加row-class-name属性。

row-class-name属性值是一个回调函数

// ...
<script>
export default {
  methods: {
      // 处理函数
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
 }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

多级表头

通过<el-column>嵌套实现多级表头，数据更具prop进行遍历，看如下案例

<el-table
    :data="tableData"
    style="width: 100%">
    <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>
        <!-- 地址没有家prop属性，所以不会对数据流影响 -->
      <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="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

效果如下

请添加图片描述

获取表格，重点说下！！！

js中如何获取表格？，通过给<el-table>添加ref属性为表格做唯一标识

<el-table highlight-current-row current-change="changerow" ref="signtable">
</el-table>
// ...
<script>
// ...
     methods: {
      setCurrent(row) {
          // 通过this.$refs.<表格ref值>
          // 设置表格的的二行为选中
        this.$refs.singleTable
      },
// ...
</script>

单选

只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号

<el-table highlight-urrent-row current-change="changerow">
    <el-column prop="name" label="姓名"></el-column>
    <el-column prop="address" label="地址"></el-column>
    <el-column prop="email" label="邮箱"></el-column>
</el-table>
<script>
// ...
     methods: {
      setCurrent(row) {
          // 设置表格的的二行为选中
        this.$refs.singleTable.setCurrentRow(1);
      },
// ...
</script>

多选

手动添加一个<el-column>属性，添加type="selection",会调价一行多选按钮

<template>
      <!-- 使用 selection-change监听选项改变，传入一个函数名 -->
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
      <!-- type="selection" 生成多选 -->
    <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>
    </el-table-column>
  </el-table>
</template>
<script>
    // 选中某一行，清除选项
</script>

使用js选中

<script>
    // this.$refs.<表单标识>.toggleRowSelection(row),row为tableData的一整行数据
    this.$refs.multipleTable.toggleRowSelection(row);
    // this.$refs.<表单标识>.clearSelection();全不选
	this.$refs.multipleTable.clearSelection();
</script>

排序

在表格中定义default-sort定义默认排序列和排序规则

通过给列添加srtotable属性赋予列排序功能

<template>
<!-- 在表格中设设置默认排序规则 -->
	<el-table
		:default-sort="{prop:'todayBuy',order:'descending'}">
        <el-table-column
                         prop="name"
                         label="名称">
    	</el-table-column>
        <el-table-column
                         prop="todayBuy"
                         label="日购买">
	    </el-table-column>
        <el-table-column
                         prop="monthBuy"
                         label="月购买">
    	</el-table-column>
        <!-- 在表格中添加srottable属性，会添加字段排序功能 -->
        <el-table-column
                         srottable
                         prop="totalBuy"
                         label="总共购买"
                         >
    	</el-table-column>
    </el-table>
    </el-table>
</template>

筛选

在列中定义:filters属性，值为一个[{ text: '', value: '' }] 的选项数组，提供给用户筛选。同时，指定处理的回调函数:filter-method,值为函数名。有三个参数，选中的值、遍历时候的行、遍历时候的列

<template>
<!-- ... 设置选项和处理函数-->
	<el-table-column
                 :filters="[{text:'300',value:'300'},{text:'800',value:'800'}]"
                 :filter-method="handleFilter"
                 prop="monthBuy"
                 label="月购买">
    </el-table-column>
<!-- ... -->
</template>
<script>
handleFilter(val,row){
	return row.todayBuy == val
}
</script>

请添加图片描述

自定义列

一般我们会添加一个操作列，如删除和编辑。那么我们可以不指定prop属性，然后为列添加其他内容如下案例。同时，我们可以通过列上定义slot-scope="scope"，通过scope来获取列和行。一下直接使用官网案例

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
        <!-- 定义slot-scope="scope"后就可在scope中获取列和行数据了 -->
      <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">
        <!-- 定义slot-scope="scope"后就可在scope中获取列和行数据了 -->
      <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="操作">
        <!-- 定义slot-scope="scope"后就可在scope中获取列和行数据了 -->
      <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>
</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: {
        // 按钮的点击函数
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

展开行

知识多又杂，一点点积累着，因为需求也是五花八门，用得上的。

在列(el-column)中添加属性 type="expand"就可设置为展开行，展开的内容定义在列标签内。属性的获取同样是通过slot-scope="scope"详情如下案例：

<template>
<el-table :data="tableData">
    <el-table-cloumn type="expand">
        <template slot-scope="scope">
			<el-card>
                <p>名称：{{scope.row.name }}</p>
                <p>地址：{{scope.row.address }}</p>
             </el-card>
        </template>
    </el-table-cloumn>
</el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    }
  }
</script>

 总结

本篇文章就到这里了，希望能给您带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

相关文章

  • vue如何解决this.refs拿取v-for下元素undefine问题

    vue如何解决this.refs拿取v-for下元素undefine问题

    这篇文章主要介绍了vue如何解决this.refs拿取v-for下元素undefine问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue使用html2canvas实现将DOM节点生成对应的PDF

    vue使用html2canvas实现将DOM节点生成对应的PDF

    这篇文章主要为大家详细介绍了vue如何使用html2canvas实现将DOM节点生成对应的PDF,文中的示例代码简洁易懂,感兴趣的小伙伴可以学习一下
    2023-08-08
  • vue.js中Vue-router 2.0基础实践教程

    vue.js中Vue-router 2.0基础实践教程

    这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • vue项目实战之圆柱状水波效果实现

    vue项目实战之圆柱状水波效果实现

    最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于vue项目实战之圆柱状水波效果实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue2.0 UI框架ElementUI使用方法详解

    Vue2.0 UI框架ElementUI使用方法详解

    这篇文章主要为大家详细介绍了Vue2.0 UI框架ElementUI的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)

    vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)

    这篇文章主要介绍了vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-09-09
  • vue中v-for数据状态值变了,但是视图没改变的解决方案

    vue中v-for数据状态值变了,但是视图没改变的解决方案

    这篇文章主要介绍了vue中v-for数据状态值变了，但是视图没改变的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • 解决vue.js提交数组时出现数组下标的问题

    解决vue.js提交数组时出现数组下标的问题

    今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue 响应式系统依赖收集过程原理解析

    Vue 响应式系统依赖收集过程原理解析

    Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表，这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下
    2022-06-06
  • Vue2.x通用编辑组件的封装及应用详解

    Vue2.x通用编辑组件的封装及应用详解

    这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论