相关文章推荐
憨厚的香菇  ·  Role of B‐type ...·  1 年前    · 
飘逸的作业本  ·  Linux 之 ab ...·  1 年前    · 
热心的大熊猫  ·  IBM Documentation·  1 年前    · 
<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>
} from 'element-ui'
Vue . component ( Select . name , Select )
Vue . component ( Button . name , Button )
 有关更多信息,请参阅我们文档中的“ 。
浏览器支持
现代浏览器和Internet Explorer 10+。
如果只想使用Element,请跳过此部分。
具体实现:”123“的说明为”qwe“
代码实现:
<el-table-column label="123" prop="qysm" :render-header="renderHeader1">
          <template slot-scope="scope">
            <span cl...
方法一: element UI官方提供了自定义表头的方法(我没有使用它提供的方法,等有空再来试一下该方法)
参考element UI官方文档         自定义表头内容
                Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
                    weixin_52917644: 
                    这个文章帮助了我。我主要是后台开发。让我做一个动态表单,这个动态验证搞了我一下午
                js 获取并解析 url 中参数的三种方法
                    CSDN-Ada助手: 
                    哇, 你的文章质量真不错,值得学习!不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)使用更多的站内链接;(2)提升标题与正文的相关性;(3)增加除了各种控件外,文章正文的字数。
                JS 实现动态规划
                    2301_82242528: 
                    博主的文章让我对这个主题有了全新的认识,细节描写非常到位,让我感受到了博主的深厚功底。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】