<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助手:
JS 实现动态规划
2301_82242528: