ElementUI之表格
文章目录
- 使用ElementUI
- 使用在线引入的方式
- 表格
- 1. 带状态表格row-class-name="Function({row, rowIndex})/String"
- 2. 固定表头(height="string/number"属性)
- 2.1 属性的取值
- 2.2 动态响应式高度
- 使用
- 演示
- 2.3 自定义滚动条样式
- 2.4 表头高度定制
- 获取一行信息slot-scope="scope"
- 使用对象传递
- 解构对象传递
- 固定列(fixed)
- 流体高度(max-height)
- 流体高度(max-height)和固定表头(height)的区别
- 多级表头
- 单选
- @current-change="handleCurrentChange"
- 鼠标点击哪一行哪一行变色highlight-current-row
- 用于单选表格setCurrentRow
- 综合使用
- 多选
- 显示不全提示属性tooltip-effect
- 多选属性 type="selection"
- 排序
使用ElementUI
使用在线引入的方式
由于ElementUI是**基于Vue2的组件库**，所以在线引入需要先引入Vue2，在去引入ElementUI。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入Element组件</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app" ><el-button type="primary">主要按钮</el-button></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data() {return {}},methods: {}})
</script></html>
演示
表格
官网网址：ElementUI表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入Element组件</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><body><div id="app"><table><tr><th>日期</th><th>姓名</th><th>地址</th></tr><tr v-for="item in tableData" :key="item.date"><td>{{item.date}}</td><td>{{item.name}}</td><td>{{item.address}}</td></tr></table><!-- el-table是ElementUI 提供的表格组件的标签 相当于table标签--><!-- :data是绑定数据，tableData是data中的数据 <img :src="变量">的src属性也是这样绑定的。--><!-- style是设置样式，width是设置宽度 --><!-- stripe属性是使用带斑马纹的表格，可以更容易区分出不同行的数据 --><!-- border属性: 会给表格加上边框 --><!-- :row-class-name="tableRowClassName" 是绑定方法，tableRowClassName是方法名 注意不能和stripe属性一起使用 --><el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName"><!-- el-table-column标签 这个相当于 <tr></tr>标签 --><!-- label属性相当于th标签 --><!-- prop属性相当于 每一列的 td标签 --><!-- width属性相当于td标签的宽度 --><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="地址" width="300"></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {tableRowClassName({ row, rowIndex }) {if (rowIndex === 1) {return 'warning-row';console.log(row);} else if (rowIndex === 3) {return 'success-row';}return '';}}})
</script></html>
1. 带状态表格row-class-name=“Function({row, rowIndex})/String”
2. 固定表头(height="string/number"属性)
2.1 属性的取值
-
数值类型（如 height=“300”）：单位默认为 px，表格高度固定为 300px，内容超出时自动出现垂直滚动条，表头保持固定。
<el-table :data="tableData" height="300"> ... </el-table> -
字符串类型（如 height=“100%”）：高度值直接绑定到 style.height，表格高度受父容器样式控制。需确保父容器有明确高度（如 100vh或固定 px），否则可能失效。
2.2 动态响应式高度
结合 Vue 的响应式变量动态调整高度：
使用
<el-table :height="tableHeight"> ... </el-table>
data() { return { tableHeight: 400 }; },
mounted() {// 根据窗口变化动态计算高度window.addEventListener('resize', () => {this.tableHeight = window.innerHeight * 0.6;});
}
演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><el-table :data="tableData" :height="tableHeight" border style="width: 50%"><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></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-03',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎3',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎4',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎5',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎6',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎7',address: '上海市普陀区金沙江路 1518 弄'}],tableHeight: 400}},methods: {},mounted() {// 根据窗口变化动态计算高度window.addEventListener('resize', () => {this.tableHeight = window.innerHeight * 0.6;console.log(11);});}})
</script></html>
2.3 自定义滚动条样式
自定义滚动条样式通过 CSS 覆盖默认样式（仅支持 Webkit 内核浏览器）
.el-table__body-wrapper::-webkit-scrollbar {width: 8px; /* 滚动条宽度 */background: #f1f1f1;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {background: #888;
}
2.4 表头高度定制
表头高度定制使用 CSS 调整表头行高（默认高度为 40px）
.el-table th.el-table__cell {height: 80px !important; /* 自定义高度 */vertical-align: middle; /* 内容垂直居中 */
}
获取一行信息slot-scope="scope"
Vue2获取一行的信息使用的是作用插槽slot-scope="scope"
- Vue 2：使用
slot-scope="scope"是标准写法。 - Vue 3：废弃 slot-scope，
改用 v-slot或 #default（如 <template #default=“{ row }”>）。若项目升级到 Vue 3，建议迁移至新语法。
使用对象传递
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style>.el-table th.el-table__cell {height: 80px !important; /* 自定义高度 */vertical-align: middle; /* 内容垂直居中 */
}
</style><body><div id="app"><el-table :data="tableData" :height="tableHeight" border style="width: 50%"><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-column label="操作"><template slot-scope="scope"><el-button @click="handleEdit(scope)">编辑</el-button></template></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-03',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎3',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎4',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎5',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎6',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎7',address: '上海市普陀区金沙江路 1518 弄'}],tableHeight: 400}},methods: {handleEdit(scope) {console.log(scope);}},mounted() {// 根据窗口变化动态计算高度window.addEventListener('resize', () => {this.tableHeight = window.innerHeight * 0.6;console.log(11);});}})
</script></html>
点击第一个编辑 按钮结果如下：
所以我们一般传入两个值
<el-table :data="tableData" :height="tableHeight" border style="width: 50%">......<el-table-column label="操作"><template slot-scope="scope"><el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button></template></el-table-column>....</el-table>
methods: {handleEdit(i,row) {console.log(i,row);}},
解构对象传递
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style>.el-table th.el-table__cell {height: 80px !important; /* 自定义高度 */vertical-align: middle; /* 内容垂直居中 */
}
</style><body><div id="app"><el-table :data="tableData" :height="tableHeight" border style="width: 50%"><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-column label="操作"><template slot-scope="{ $index, row }"><el-button @click="handleEdit($index, row)">编辑</el-button></template></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-03',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎3',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎4',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎5',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎6',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎7',address: '上海市普陀区金沙江路 1518 弄'}],tableHeight: 400}},methods: {handleEdit(i,row) {console.log(i,row);}},mounted() {// 根据窗口变化动态计算高度window.addEventListener('resize', () => {this.tableHeight = window.innerHeight * 0.6;console.log(11);});}})
</script></html>
固定列(fixed)
横向内容过多时，可选择固定列。
属性：fixed
作用：列是否固定在左侧或者右侧，true 表示固定在左侧
取值类型：string, boolean
取值：true, left, right
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><el-table :data="tableData" border style="width: 50%" >
<!-- fixed == fixed="left" --><el-table-column prop="date" label="日期" width="150"></el-table-column><el-table-column fixed prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333}]}},methods: {},mounted() {}})
</script></html>
流体高度(max-height)
通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><el-table :data="tableData" border max-height="200" style="width: 50%"><!-- fixed == fixed="left" --><el-table-column prop="date" label="日期" width="150"></el-table-column><el-table-column fixed prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333}]}},methods: {},mounted() {}})
</script></html>
流体高度(max-height)和固定表头(height)的区别
max-height：当小于指定高度，高度会变小
height：当小于指定高度，高度会有留白，不会变小
多级表头
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定表头</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><el-table :data="tableData" style="width: 100%"><!-- 一级 日期列 --><el-table-column prop="date" label="日期" width="150"></el-table-column><!-- 一级 配送信息列 --><el-table-column label="配送信息"><!-- 二级 姓名 --><el-table-column prop="name" label="姓名" width="120"></el-table-column><!-- 二级 地址 --><el-table-column label="地址"><!-- 三级 省份 市区 地址 邮编 --><el-table-column label="省份"><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column></el-table-column></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},methods: {},mounted() {}})
</script></html>
单选
@current-change=“handleCurrentChange”
在了解之前我们先来学习@current-change="handleCurrentChange"方法
这个方法用于监听用户点击了表格的哪一行数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><!-- current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。 --><el-table ref="singleTable" :data="tableData" @current-change="handleCurrentChange"style="width: 50%"><!-- 如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号 --><el-table-column type="index" width="50"></el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎4',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {handleCurrentChange(currentRow, oldCurrentRow) {console.log("当前行",currentRow);// 当前点击的行数据console.log("上一次点击的行",oldCurrentRow);// 上一次点击的行数据}}})
</script></html>
鼠标点击哪一行哪一行变色highlight-current-row
highlight-current-row 是否要高亮当前行 boolean — false
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。--><el-table ref="singleTable" :data="tableData" highlight-current-row@current-change="handleCurrentChange"style="width: 50%"><!-- 如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号 --><el-table-column type="index" width="50"></el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎4',address: '上海市普陀区金沙江路 1516 弄'}],}},methods: {handleCurrentChange(currentRow, oldCurrentRow) {console.log("当前行",currentRow);// 当前点击的行数据console.log("上一次点击的行"+oldCurrentRow);// 上一次点击的行数据}}})
</script></html>
用于单选表格setCurrentRow
方法：setCurrentRow
作用：用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
传参：row
条件：需要和highlight-current-row搭配使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。--><el-table ref="singleTable" :data="tableData" highlight-current-row@current-change="handleCurrentChange"style="width: 50%"><!-- 如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号 --><el-table-column type="index" width="50"></el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="selectTwo(tableData[1])">选中第二行</el-button><el-button @click="selectTwo()">取消选择</el-button></div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎4',address: '上海市普陀区金沙江路 1516 弄'}],currentRow: null}},methods: {selectTwo(currentRow) {// 使用this.$refs.singleTable.setCurrentRow(currentRow);},}})
</script></html>
综合使用
点击按钮选中，并选中把第二行数据存起来，
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。--><el-table ref="singleTable" :data="tableData" highlight-current-row@current-change="handleCurrentChange"style="width: 50%"><!-- 如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号 --><el-table-column type="index" width="50"></el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="selectTwo(tableData[1])">选中第二行</el-button><el-button @click="selectTwo()">取消选择</el-button></div></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎4',address: '上海市普陀区金沙江路 1516 弄'}],currentRow: null}},methods: {selectTwo(currentRow) {// 设置当前行this.$refs.singleTable.setCurrentRow(currentRow);},// a:当前行 b:上一次行handleCurrentChange(a, b) {// 当selectTwo被点击，执行this.$refs.singleTable.setCurrentRow(currentRow);时// 会触发本函数handleCurrentChange// 把值存起来便于后续操作this.currentRow = a;console.log(this.currentRow);}}})
</script></html>
多选
显示不全提示属性tooltip-effect
提示属性：tooltip-effect
取值：dark/light
触发场景：只有内容过被隐藏时，鼠标放到被隐藏的内容上面才会触发，必须配合show-overflow-tooltip才会生效。
show-overflow-tooltip作用：当内容过长被隐藏时显示 tooltip
show-overflow-tooltip值类型：Boolean
<el-table :data="tableData" tooltip-effect="dark" style="width: 30%">......<el-table-column prop="address" label="地址"show-overflow-tooltip></el-table-column>
</el-table>
多选属性 type=“selection”
表格事件selection-change
作用：当选择项发生变化时会触发该事件
参数：被选择的数据数组
使用：
<div id="app"><el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 30%"@selection-change="handleSelectionChange">.....</el-table>
</div><script>new Vue({el: '#app',data() { },methods: {handleSelectionChange(val) {this.multipleSelection = val;}}})
</script>
表格方法：clearSelection
作用：用于多选表格，清空用户的选择
参数：无
使用：this.$refs.multipleTable.clearSelection();
表格方法：toggleRowSelection
作用：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
参数：row, selected
使用：this.$refs.multipleTable.clearSelection(row [,selected]);
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><style></style><body><div id="app"><!-- @selection-change="handleSelectionChange"当选择项发生变化时会触发该事件 --><el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 30%"@selection-change="handleSelectionChange"><!-- 这里添加 一个type="selection" 用于选中 --><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><!-- 点击选中第二、三条数据 --><el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button><!-- 取消选择的第二、三条数据 --><el-button @click="toggleSelection()">取消选择</el-button></div></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],multipleSelection: []}},methods: {toggleSelection(rows) {console.log(rows);if (rows) {rows.forEach(row => {// 此方法是把传入的行数据 选中this.$refs.multipleTable.toggleRowSelection(row);});} else {// 当没有传值，即取消选择：rows==undefined 清空选项this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {console.log(val);// val为当前选中行的数据this.multipleSelection = val;}}})
</script></html>
排序
对表格进行排序，可快速查找或对比数据。