在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。

 在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的展示和处理效果,其中包括Element的el-table组件,以及其他第三方类组件,如vue-easytable、vue-willtable,以及vxe-table,针对性的对比相关的差异。

1、el-table表格组件

这个是Element的表格组件,使用参考地址如下: https://element.eleme.cn/#/zh-CN/component/table
这个表格组件也是非常好用的展示数据的组件,提供了很多属性设置,表格列的模板定义可以进行各种各样的转义和处理,是我们使用Element组件经常用到的组件之一。
简单的界面效果如下所示。
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。_第1张图片

 它的简单界面代码如下所示,主要就是提供列的定义。

<template>
  <el-table :data="tableData" stripe style="width: 100%">
  <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>
template>

而数据这是一个对象集合,里面对应各种属性记录,如下所示。

不过一般实际使用的表格比这个会复杂很多,会在列之中提供很多转义信息展示,如下界面效果所示

在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。_第2张图片

或者

 在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。_第3张图片

  我们来看看表格头部和表格列的相关定义来进行解析。

<el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row
          :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange"
          @row-dblclick="rowDbclick" @sort-change="sortChange">

listLoading用来 展示/隐藏 加载中的状态

list则是提供给表格数据处理的数据源

selectionChange这是选中/取消勾选框的事件触发

rowDbclick是双击表格行出现的事件响应

sortChange是排序表头出现的事件处理

另外,表格数据往往涉及到分页信息,那么必须和分页控件一起使用

        
        <div class="block" style="height:70px;">
          <el-pagination :current-page="pageinfo.pageindex" :page-size="pageinfo.pagesize" :total="pageinfo.total"
            :page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next" @size-change="sizeChange"
            @current-change="currentChange" />
        div>

其中分页组件中涉及到pageinfo对象,包括当前页码和每页的数据记录数量,以及对每页数据大小变化事件sizeChange、页码变化的事件currentChange的处理。

因此我们在

你可能感兴趣的:(在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。)