【Element】el-table 表格

news2024/11/16 17:59:05

目录

ElementUI

表格分页（每页20条）

表格分页（全部数据）

表格排序（全部数据）

表格排序（默认）

两个el-table冲突

加载数据前显示“ 暂无数据 ”

表格项为路由

表头样式

树形表格

点击表格单行

人数统计表（多级表头、合并行或列）

ElementUI

表格分页（每页20条）

<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" tooltip-effect="dark">
  <!-- 复选框 -->
  <el-table-column type="selection"> </el-table-column>
  <!-- 序号 -->
  <el-table-column type="index" label="序号" width="70"></el-table-column>
  <!-- 名称很长显示悬浮窗 -->
  <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
  <!-- 自定义参数类型 -->
  <el-table-column label="类型">
    <template slot-scope="scope">
      <div v-if="scope.row.type === 1">小程序</div>
      <div v-else-if="scope.row.type === 2">后台</div>
      <div v-else>全部</div>
    </template>
  </el-table-column>
   <!-- 操作 -->
  <el-table-column label="操作" width="220">
    <template slot-scope="scope">
      <el-button size="small" @click="edit(scope.row,scope.$index)" type="primary">编辑</el-button>
      <el-button size="small" @click="remove(scope.row,scope.$index)" type="danger">删除</el-button>
    </template>
  </el-table-column>
</el-table>

<!-- 分页 -->
<div class="pagination">
  <el-pagination
    background
    layout="total,prev,pager,next,sizes,jumper"
    :total="total"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pageSize"
    :current-page.sync="pageNum"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</div>

表格单元格内容过多，使用文字提示。超出一行省略号。悬浮展示所有内容。

show-overflow-tooltip

tooltip-effect="dark"

 操作的时候获取当前行和当前行的下标

scope.row

scope.$index

data() {
  return {
    // 复选框所选中信息
    selection: [],
    selectStr: "",

    // 表格数据
    tableData: [],

    // 总条数
    total: 0,

    // 页面条数
    pageSize: 20,

    // 页码
    pageNum: 1,
  };
},
created() {
  this.getList();
},

// 获取列表数据
async getList(pageNum, pageSize) {
  const res = await getIntegralRecord({
    pageNum,
    pageSize,
  });
  this.tableData = res.data.list;
  this.total = res.data.total;
},

// 数量回调
handleSizeChange(e) {
  this.pageSize = e;
  this.getList();
},

// 页码回调
handleCurrentChange(e) {
  this.pageNum = e;
  this.getList();
},
// 复选框回调
handleSelectionChange(val) {
  this.selection = val;
  this.selectStr = val.map(function (e) {return e.id}).join(",");
},

表格分页（全部数据）

每页5条

每页10条

<el-table
  v-loading="loading"
  :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  style="width: 100%;"
>
  <el-table-column label="序号" type="index" align="center">
    <template slot-scope="scope">
      <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column label="编号" align="center" prop="id"  />
</el-table>

<el-pagination
  :current-page="pageNum"
  :page-size="pageSize"
  :page-sizes="[5, 10, 20, 30, 50]"
  :pager-count="5"
  :total="total"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
data() {
  return {
    loading: true,
    total: 0,
    pageNum: 1,
    pageSize: 10,
    list: []
  };
},
created() {
  this.getList();
},
methods: {

  handleSizeChange(val) {
    this.pageSize = val
    if (this.pageNum * val > this.total) {
      this.pageNum = 1
    }
    this.getList()
  },

  handleCurrentChange(val) {
    this.pageNum = val
    this.getList()
  },

  getList() {
    this.loading = true;
    list({}).then(response => {
      this.list = [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
        {id: 6},
        {id: 7},
        {id: 8},
        {id: 9},
        {id: 10},
        {id: 11},
      ];
      this.total = 11;
      this.loading = false;
    });
  },
}

表格排序（全部数据）

单项排序

@sort-change="sortChange"

sortable='custom'

<el-table
  v-loading="loading"
  :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  style="width: 100%;"
  @sort-change="sortChange"
>
  <el-table-column label="序号" type="index" align="center">
    <template slot-scope="scope">
      <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column label="编号" align="center" prop="id" sortable='custom' />
</el-table>
data() {
  return {
    list: [],
  };
},
created() {
  this.getList();
},
methods: {
  sortChange(column){
    this.pageNum = 1
    
    if(column.order === 'ascending'){ // 降序
      this.list.sort(this.ascSortFun)
    }else if(column.order === 'descending'){ // 升序
      this.list.sort(this.desSortFun)
    }else{
      this.getList()
    }
  },

  //升序
  ascSortFun(a, b) {
    if (a.id > b.id) return 1;
    if (a.id == b.id) return 0;
    if (a.id < b.id) return -1;
  },

  //降序
  desSortFun(a,b){
    if (a.id > b.id) return -1;
    if (a.id == b.id) return 0;
    if (a.id < b.id) return 1;
  },
  
  getList() {
    this.loading = true;
    list({}).then(response => {
      this.list = [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
        {id: 6},
        {id: 7},
        {id: 8},
        {id: 9},
        {id: 10},
        {id: 11},
      ];
      this.total = 11;
      this.loading = false;
    });
  },
}

多项排序

<el-table
  v-loading="loading"
  :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  style="width: 100%;"
  @sort-change="sortChange"
>
  <el-table-column label="序号" type="index" align="center">
    <template slot-scope="scope">
      <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column label="编号" align="center" prop="id" sortable='custom' />
  <el-table-column label="时间" align="center" prop="time" sortable='custom' />
</el-table>
data() {
  return {
    prop: "",
    list: [],
  };
},
created() {
  this.getList();
},
methods: {
  sortChange(column){
    this.pageNum = 1
    this.prop = column.prop

    if(column.order === 'ascending'){ // 降序
      this.list.sort(this.ascSortFun)
    }else if(column.order === 'descending'){ // 升序
      this.list.sort(this.desSortFun)
    }else{
      this.getList()
    }
  },

  //升序
  ascSortFun(a, b) {
    if (a[this.prop] > b[this.prop]) return 1;
    if (a[this.prop] == b[this.prop]) return 0;
    if (a[this.prop] < b[this.prop]) return -1;
  },

  //降序
  desSortFun(a,b){
    if (a[this.prop] > b[this.prop]) return -1;
    if (a[this.prop] == b[this.prop]) return 0;
    if (a[this.prop] < b[this.prop]) return 1;
  },
  
  getList() {
    this.loading = true;
    list({}).then(response => {
      this.list = [
        {id: 1,time: '11-02'},
        {id: 2,time: '11-03'},
        {id: 3,time: '11-05'},
        {id: 4,time: '11-04'},
        {id: 5,time: '11-02'},
        {id: 6,time: '11-04'},
        {id: 7,time: '11-03'},
        {id: 8,time: '11-04'},
        {id: 9,time: '11-11'},
        {id: 10,time: '11-03'},
        {id: 11,time: '11-01'},
      ];
      this.total = 11;
      this.loading = false;
    });
  },
}

表格排序（默认）

<el-table
  ref="table"
  v-loading="loading"
  :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  style="width: 100%;"
  :default-sort="defaultSort"
  @sort-change="sortChange"
>
  <el-table-column label="序号" type="index" align="center">
    <template slot-scope="scope">
      <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column label="编号" align="center" prop="id" sortable='custom' />
  <el-table-column label="时间" align="center" prop="time" sortable='custom' />
</el-table>
data() {
  return {
    defaultSort: {prop: 'time', order: 'descending'},
    list: [],
  };
},

 重置成默认值

reset() {
  this.$refs.table.sort(this.defaultSort.prop, this.defaultSort.order)
},

两个el-table冲突

设置两个不同的key就解决问题啦

<el-table :data="tableData" key="1"></el-table>
<el-table :data="tableData2" key="2"></el-table>

加载数据前显示“ 暂无数据 ”

<el-table :data="tableData" style="width: 100%">    
  <template slot="empty">
    <p>{{empty}}</p>
  </template>
</el-table> 
data: {
    return： {
        tableData: [],
        text: ''
    }
}
created() {
  getTableData({}).then(res => {
    if(res.code == 200) {
      this.tableData = res.data
      this.text = this.tableData.length > 0 ? '暂无数据' : ''
    }
  });
},

表格项为路由

<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
  <template slot-scope="scope">
    <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
      <span>{{ scope.row.dictType }}</span>
    </router-link>
  </template>
</el-table-column>

表头样式

class和style的两种写法

<el-table  
  :data="tableData"  
  header-cell-class-name="tableStyle"
  :header-cell-class-name="headerStyle"

  :header-cell-style='tableHeaderStyle' 
  :header-cell-style="{
    'background-color': '#1989fa',
    'color': '#fff',
    'font-weight': '400'
  }"
></el-table>
headerStyle ({row, column, rowIndex, columnIndex}) {
    return 'tableStyle'
},
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
    return 'background-color:#1989fa;color:#fff;font-weight:400;'
}

树形表格

<el-button @click="toggleExpandAll">展开/折叠</el-button>

<el-table
  v-if="refreshTable"
  :data="list"
  row-key="id"
  :default-expand-all="isExpandAll"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
  <el-table-column prop="name" label="名称"></el-table-column>
</el-table>
data() {
  return {
    refreshTable: true,

    isExpandAll: true,

    list:[
      {
        id: 1,
        name: '1',
        
        children: [
          {
            id: 11,
            name: '11',
            children: [
              {
                id: 111,
                name: '111',
              }
            ]
          },
          {
            id: 12,
            name: '12',
          },
        ]
      },
      {
        id: 2,
        name: '2',
        children: [
          {
            id: 21,
            name: '21'
          },
          {
            id: 22,
            name: '22'
          },
        ]
      }
    ]

  };
},

展开折叠操作

toggleExpandAll() {
  this.refreshTable = false;
  this.isExpandAll = !this.isExpandAll;
  this.$nextTick(() => {
    this.refreshTable = true;
  });
},

点击表格单行

row-key：行数据的Key

<el-table 
  ref="table"
  v-loading="loading" 
  :data="tableData"
  :row-key="getRowKey" 
  @row-click="clickRow" 
  @selection-change="handleSelectionChange" 
>
</el-table>
// 单击选中行数据
clickRow(row) {
  this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
  this.ids = selection.map((item) => item.id);
},
// 保存选中的数据编号
getRowKey(row) {
  return row.id;
},

人数统计表（多级表头、合并行或列）

<el-table
  :data="school_table"
  style="width: 100%;margin-top: 20px;"
  :span-method="spanMethod"
>
  <el-table-column
    align="center"
    prop="name"
    label="名称"
    width="150">
  </el-table-column>
  <el-table-column align="center" :label="item.name" v-for="(item,index) in class_list" :key="index">
    <el-table-column
      align="center"
      label="男"
      width="120">
      <template slot-scope="scope">
        <div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
          <el-input-number style="width: 100%;" v-model="v.man" :controls="false"></el-input-number>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column
      align="center"
      prop="name"
      label="女"
      width="120">
      <template slot-scope="scope">
        <div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
          <el-input-number style="width: 100%;" v-model="v.woman" :controls="false"></el-input-number>
        </div>
      </template>
    </el-table-column>
  </el-table-column>

  <el-table-column
    align="center"
    prop="total"
    label="合计">
  </el-table-column>
</el-table>
school_table: [
  {
    id: 1,
    name: '1小学',
    total: 1,
    data:[
      {classId:1, man:1, woman:2},
      {classId:2, man:3, woman:4},
    ],
    
  },
  {
    id: 2,
    name: '2小学',
    data:[
      {classId:1, man:7, woman:8},
      {classId:2, man:9, woman:10},
    ],
  }
],
school_list: [
  {
    id: 1,
    name:'1小学'
  },
  {
    id: 2,
    name:'2小学'
  },
],
class_list:[
  {
    id: 1,
    name:'一年级'
  },
  {
    id: 2,
    name:'二年级'
  }
]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/354884.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Homebrew 安装遇到的问题

Homebrew 安装遇到的问题

Homebrew 安装遇到的问题 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 文章目录Homebrew 安装遇到的问题前言一、安装二、遇到的问题1.提示 zsh: command not found: brew三、解决问题前言 使用 Homebrew 能够 安装 Apple&#xff08;或您的 Linux 系统&#…
阅读更多...
React 合成事件理解

React 合成事件理解

1 事件三个阶段 捕获、目标、处理 &#xff08;具体百度&#xff0c;后面有空补全&#xff09;2import React from "react";class Test extends React.Component {parentRef;childRef;constructor(props) {super(props);this.parentRef React.createRef();this.chil…
阅读更多...
cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

前言 前段时间&#xff0c;电脑忽然出现了问题&#xff0c;首先是通过 微软应用商店 Microsoft Store 下载安装的 Snipaste 截图软件崩溃&#xff0c;不过将其卸载后&#xff0c;通过电脑管家下载后又可以正常使用了。 之后就是突然发现&#xff0c;记事本文本文档不能使用了…
阅读更多...
分享112个HTML娱乐休闲模板，总有一款适合您

分享112个HTML娱乐休闲模板，总有一款适合您

分享112个HTML娱乐休闲模板&#xff0c;总有一款适合您 112个HTML娱乐休闲模板下载链接&#xff1a;https://pan.baidu.com/s/15uBy1SVSckPPMM55fiudeQ?pwdkqfz 提取码&#xff1a;kqfz Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 Bootstrap视频网站模板 …
阅读更多...
Terraform基础入门 (Infrastructure as Code)

Terraform基础入门 (Infrastructure as Code)

文章目录前言介绍Terraform 术语Terraform 如何工作关于provider安装开启本地缓存demo1(dockernginx)demo2(dockerzookeeperkafka)参考资料前言 像写代码一样管理基础设施。 Terraform 使用较为高级的配置文件语法来描述基础设施&#xff0c;这个特性让你对配置文件进行版本化…
阅读更多...
Ubuntu升级cmake

Ubuntu升级cmake

目录 1、下载cmake安装包 2、开始安装 3、查看cmake版本 参考链接&#xff1a; https://blog.csdn.net/qq_27350133/article/details/121994229 1、下载cmake安装包 cmake安装包下载&#xff1a;download | cmake 我们根据自身需求下载所需版本的cmake安装包&#xff0c;这…
阅读更多...
万字干货 | 荔枝魔方基于云原生的架构设计与实践

万字干货 | 荔枝魔方基于云原生的架构设计与实践

近年来&#xff0c;荔枝集团在国内和海外的业务迅速发展&#xff0c;业务数据规模也是成几何式地增长&#xff0c;海量数据的计算分析场景、业务智能算法应用需求随之而生&#xff0c;为了快速地满足业务发展的需要&#xff0c;我们面临着诸多的技术挑战。技术挑战工程问题资源…
阅读更多...
计算机如何思考与图灵完备

计算机如何思考与图灵完备

图灵完备是针对一套数据操作规则而言的概念，数据操作规则可以是一门编程语言，也可以是计算机实现里面的指令集，比如C/C++是图图灵完备的，通用CPU也是图灵完备的，但是GPU却不一定是图灵完备的。说白了图灵完备定义了一套规则，当这套规则可以实现图灵迹模型里的全部功能时，…
阅读更多...
Unreal Engine09：自定义Pawn运动组件

Unreal Engine09：自定义Pawn运动组件

写在前面 这里介绍一下如何为Pawn定制自定义的运动组件。 一、新建一个运动组件C类 需要在Editor中新建类&#xff0c;不要直接Visual Studio中新建&#xff1b;Pawn的运动组件继承自UPawnMovementComponent&#xff0c;需要勾选显示所有类才能找到&#xff1b; 初始时&…
阅读更多...
【PowerQuery】PowerBI 的PowerQuery支持的数据集成

【PowerQuery】PowerBI 的PowerQuery支持的数据集成

PowerBI中的各个Power组件已经被深度集成到PowerBI中，不再作为像Excel一样的独立组件而存在。在PowerBI的界面中为了快速导入这些常用的数据，也有相应的快速导入界面。PowerBI的快速导入界面位于主页面中，下图就是PowerBI的快速导入界面。 在PowerBI中的数据导入界面相比Exc…
阅读更多...
Leetcode.958 二叉树的完全性检验

Leetcode.958 二叉树的完全性检验

题目链接 Leetcode.958 二叉树的完全性检验 Rating : 1703 题目描述 给定一个二叉树的 root&#xff0c;确定它是否是一个 完全二叉树 。 在一个 完全二叉树 中&#xff0c;除了最后一个关卡外&#xff0c;所有关卡都是完全被填满的&#xff0c;并且最后一个关卡中的所有节点…
阅读更多...
【郭东白架构课 模块一：生存法则】11｜法则五：架构师为什么要关注技术体系的外部适应性？

【郭东白架构课 模块一：生存法则】11｜法则五：架构师为什么要关注技术体系的外部适应性？

你好&#xff0c; 我是郭东白。 前四条法则分别讲了目标、资源、人性和技术周期&#xff0c;这些都与架构活动的外部环境有关。那么今天我们来讲讲在架构活动内部&#xff0c;也就是在架构师可控的范围内&#xff0c;应该遵守哪些法则。今天这节课&#xff0c;我们就先从技术体…
阅读更多...
乡村振兴研究：全网最全指标农村经济面板数据（2000-2021年）

乡村振兴研究：全网最全指标农村经济面板数据（2000-2021年）

数据来源&#xff1a;国家统计局 时间跨度&#xff1a;2000-2021年 区域范围&#xff1a;全国31省 指标说明&#xff1a; 部分样例数据&#xff1a; 行政区划代码地区年份经度纬度乡镇数(个)乡数(个)镇数(个)村民委员会数(个)乡村户数(万户)乡村人口(万人)乡村从业人员(万人…
阅读更多...
通过4个月的自动化学习，现在我也拿到了25K的offer

通过4个月的自动化学习，现在我也拿到了25K的offer

毕业后的5年&#xff0c;是拉开职场差距的关键时期。有人通过这5年的努力&#xff0c;实现了大厂高薪&#xff0c;有人在这5年里得到贵人的赏识&#xff0c;实现了职级的快速拔升&#xff0c;还有人在这5年里逐渐掉队&#xff0c;成了职场里隐身一族&#xff0c;归于静默。 而…
阅读更多...
如何高效远程维护分布在海外的中大型智能设备？

如何高效远程维护分布在海外的中大型智能设备？

一、行业需求 随着越来越多的企业进行全球化经营&#xff0c;设备制造商和系统集成商的设备分布到全球各地&#xff0c;数量多而且分散&#xff0c;传统的设备运维方式&#xff0c;面临着出差成本高&#xff0c;工作效率低&#xff0c;服务不及时等问题&#xff0c;客户常常因…
阅读更多...
华为手表开发：WATCH 3 Pro（8）获取位置服务

华为手表开发：WATCH 3 Pro（8）获取位置服务

华为手表开发&#xff1a;WATCH 3 Pro&#xff08;8&#xff09;获取位置服务初环境与设备文件夹&#xff1a;文件新增第二页面geolocation.hmlgeolocation.js修改首页 -> 新建按钮 “ 跳转 ”index.hmlindex.js 引用包&#xff1a;system.router首页效果点击结果按钮跳转后…
阅读更多...
【Linux详解】——文件基础（I/O、文件描述符、重定向、缓冲区）

【Linux详解】——文件基础（I/O、文件描述符、重定向、缓冲区）

&#x1f4d6; 前言&#xff1a;本期介绍文件基础I/O。 目录&#x1f552; 1. 文件回顾&#x1f558; 1.1 基本概念&#x1f558; 1.2 C语言文件操作&#x1f564; 1.2.1 概述&#x1f564; 1.2.2 实操&#x1f564; 1.2.3 OS接口open的使用&#xff08;比特位标记&#xff09;…
阅读更多...
【Java基础】023 -- 集合进阶（List、Set、泛型、树）

【Java基础】023 -- 集合进阶（List、Set、泛型、树）

目录 一、集合的体系结构 1、单列集合&#xff08;Collection&#xff09; 二、Collection集合 1、Collection常见方法 ①、代码实现&#xff1a; ②、contains方法重写equals方法示例&#xff1a;&#xff08;idea可自动重写&#xff09; 2、Collection的遍历方式&#xff08;…
阅读更多...
拂晓·微信机器人

拂晓·微信机器人

前言 本项目是基于千寻微信框架进行的功能开发&#xff0c;采用SpringBoot青云客机器人进行开发。 千寻初衷是想开源一个框架的写法&#xff0c;并不是为了用来运营&#xff0c;因此功能不全&#xff0c;所以使用和适配前请查看是否与自己需求匹配。 因此本文主要通过千寻客…
阅读更多...
JVM详解——类的加载

JVM详解——类的加载

文章目录类的加载1、Java程序如何运行2、Java字节码文件3、类加载4、类加载的过程5、类加载器6、类的加载方式7、类的加载机制8、双亲委派机制9、破坏双亲委派机制类的加载 1、Java程序如何运行 首先通过Javac命令将.java文件编译生成.class字节码文件。 Javac是Java编译命令&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023