Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)

简介: Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)

表头添加注释

实现原理:表头插槽

<el-table-column prop="name" width="180">
  <template slot="header">
    <el-tooltip effect="dark" content="身份证上的姓名" placement="top">
      <span>姓名 <i class="el-icon-question"></i> </span>
    </el-tooltip>
  </template>
</el-table-column>

完整范例代码:

<template>
  <div style="padding: 60px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" width="180">
        <template slot="header">
          <el-tooltip effect="dark" content="身份证上的姓名" placement="top">
            <span>姓名 <i class="el-icon-question"></i> </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
};
</script>

翻页连续序号

实现原理:序号列插槽,根据页码、每页大小和默认序号动态生成连续序号

 <el-table-column
   type="index"
   fixed
   label="序号"
   width="50px"
   align="center"
 >
   <template slot-scope="scope">
     {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
   </template>
 </el-table-column>

完整范例代码:

<template>
  <div style="padding: 30px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        fixed
        label="序号"
        width="50px"
        align="center"
      >
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column align="center" prop="address" label="地址">
      </el-table-column>
    </el-table>
    <div style="padding: 10px">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="currentPage"
        :page-sizes="[2, 3]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 2,
      tableData: [],
      data: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎8",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎9",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  mounted() {
    this.updateTableData();
  },
  methods: {
    pageSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.updateTableData();
    },
    currentPageChange(newPage) {
      this.currentPage = newPage;
      this.updateTableData();
    },
    // 前端分页
    updateTableData() {
      this.tableData = this.data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.pageSize * this.currentPage
      );
    },
  },
};
</script>
目录
相关文章
|
8天前
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
24 3
前端项目一键换肤vue+element(ColorPicker)
|
2月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
68 0
|
2月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
99 0
|
2月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
96 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
5月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
5月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?
下一篇
无影云桌面