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>

排序

对表格进行排序，可快速查找或对比数据。

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

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

相关文章

K8S 的 Master组件

K8S 的 Master组件

K8S 的 Master 组件有哪些&#xff1f;每个组件的作用&#xff1f; K8s 大脑的 4 大核心模块&#xff0c;掌控全局&#xff01; Kubernetes 集群的 Master&#xff08;主节点&#xff09; 就像一座 指挥中心&#xff0c;负责整个集群的调度、管理和控制。它由 4 大核心组件组成…
阅读更多...
如何 让ubuntu 在root 下安装的docker 在 普通用户下也能用

如何 让ubuntu 在root 下安装的docker 在 普通用户下也能用

在 Ubuntu 系统中&#xff0c;如果 Docker 是以 root 用户安装的&#xff0c;普通用户默认无法直接使用 Docker 命令&#xff08;会报权限错误&#xff09;。要让普通用户也能使用 Docker&#xff0c;可以按照以下步骤操作&#xff1a;方法 1&#xff1a;将用户加入 docker 用户…
阅读更多...
模板方法模式：优雅封装算法骨架

模板方法模式：优雅封装算法骨架

目录 一、模板方法模式 1、结构 2、特性 3、优缺点 3.1、优点 3.2、缺点 4、使用场景 5、实现示例 5.1、抽象类 5.2、实现类 5.3、测试类 一、模板方法模式 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它在一个方…
阅读更多...
韦东山STM32_HAl库入门教程（SPI）学习笔记[09]内容

韦东山STM32_HAl库入门教程（SPI）学习笔记[09]内容

&#xff08;1&#xff09;SPI程序层次一、核心逻辑&#xff1a;“SPI Flash 操作” 是怎么跑起来的&#xff1f;要读写 SPI Flash&#xff0c;需同时理解 硬件连接&#xff08;怎么接线&#xff09; 和 软件分层&#xff08;谁负责发指令、谁负责控制逻辑&#xff09;&#xf…
阅读更多...
线上Linux服务器的优化设置、系统安全与网络安全策略

线上Linux服务器的优化设置、系统安全与网络安全策略

一、Linux服务器的优化设置 线上Linux的优化配置序号基础优化配置内容说明1最小化安装系统【仅安装需要的&#xff0c;按需安装、不用不装】&#xff0c;必须安装的有基本开发环境、基本网络包、基本应用包。2ssh登录策略优化 Linux服务器上的ssh服务端配置文件是【/et…
阅读更多...
基于人眼视觉特性的相关图像增强基础知识介绍

基于人眼视觉特性的相关图像增强基础知识介绍

目录 1. 传统的灰度级动态范围优化配置方法 2.基于视觉特性的灰度级动态范围调整优化 1. 传统的灰度级动态范围优化配置方法 传统的灰度级动态范围调整方法主要包括线性动态范围调整及非线性动态 范围调整。线性动态范围调整是最简单的灰度级动态范围调整方法&#xff0c;观察…
阅读更多...
Selenium使用超全指南

Selenium使用超全指南

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快概述selenium是网页应用中最流行的自动化测试工具&#xff0c;可以用来做自动化测试或者浏览器爬虫等。官网地址为&#xff1a;相对于另外一款web自动化测试工具QT…
阅读更多...
Go通道操作全解析：从基础到高并发模式

Go通道操作全解析：从基础到高并发模式

一、channel类型 Go 语言中的通道（channel）是一种特殊的类型。它类似于传送带或队列，遵循先进先出（FIFO）原则，确保数据收发顺序的一致性。每个通道都是特定类型的导管，因此在声明时必须指定其元素类型。 channel是一种类型， 一种引用类型。 声明通道类型的格式如下：…
阅读更多...
Linux网络--1、网络基础

Linux网络--1、网络基础

目录 一、网络发展 二、理解分层 2.1OSI七层模型 2.2TCP/IP分层模型 2.3分层的好处 三、认识协议 3.1初步认识 3.2了解指定组织 3.3具体协议理解 3.3.1是什么 3.3.2为什么 3.3.3与OS的关系 3.4总结 四、网络传输流程 4.1局域网网络传输 4.1.1通信过程 4.1.2概念解析 4.2跨网…
阅读更多...
前端视角下关于 WebSocket 的简单理解

前端视角下关于 WebSocket 的简单理解

参考 RFC 6455: The WebSocket Protocol WebSocket 协议基础 协议本质&#xff1a;在单个 TCP 连接上提供全双工通信通道的协议核心优势&#xff1a; 双向实时通信&#xff08;服务器主动推送&#xff09;低延迟&#xff08;相比 HTTP 轮询&#xff09;高效数据传输&#xff0…
阅读更多...
自动化一键部署 LNMP 环境

自动化一键部署 LNMP 环境

第一步&#xff1a;准备环境 & 准备脚本文件1. 你在 CentOS 7 的服务器/虚拟机里打开终端&#xff0c;确认你有 root 权限或者能用 sudo。输入下面命令确认你的系统版本&#xff1a;cat /etc/centos-release你应该看到类似&#xff1a;CentOS Linux release 7.9.2009 (Core…
阅读更多...
react之React.cloneElement()

react之React.cloneElement()

react提供的这个方法克隆组件的方法&#xff0c;可能我们在平常的开发中用的很少&#xff0c;主要可能是我们并不知道或者并不了解这个方法。因为我在之前react的children文章中用到过&#xff0c;所以我就进行了一系列的测试&#xff0c;发现真的非常的好用。我们同样使用一些…
阅读更多...
学习Java的Day27

学习Java的Day27

今天学习的主要内容是在IntelliJ IDEA开发环境中&#xff0c;通过部署Tomcat服务器并连接MySQL数据库&#xff0c;实现了一个完整的留言板系统。这个项目涵盖了前后端开发的全流程&#xff0c;具体包括以下关键环节&#xff1a;开发环境搭建使用IntelliJ IDEA Ultimate版&#…
阅读更多...
【计算机网络 | 第3篇】物理媒介

【计算机网络 | 第3篇】物理媒介

文章目录物理媒介介绍与物理媒体的分类&#x1f95d;成本考量引导型传输媒体&#x1f34b;引导型传输媒体&#xff1a;双绞线&#x1f34b;‍&#x1f7e9;双绞线类别双绞线的发展历程双绞线的物理限制引导型传输媒体&#xff1a;同轴电缆&#x1f34b;‍&#x1f7e9;结构组成…
阅读更多...
golang的切片

golang的切片

切片 为什么需要切片 用于元素的个数不确定&#xff0c;所以无法通过数组的形式来进行统计。此时就需要切片 切片&#xff0c;也因此可以粗略地理解为动态数组数组的长度不能用变量来确定&#xff0c;这时候切片slice也就派上用场了 切片地基本介绍 切片的英文是slice切片是数组…
阅读更多...
在labview中实现视频播放

在labview中实现视频播放

这里分享一个迅雷的视频播放控件APlayer&#xff0c;非常的好用。具体操作步骤如下&#xff1a; 1.下载控件: 首先下载http://aplayer.open.xunlei.com/codecs.zip&#xff0c;将codecs文件解压后打开&#xff0c;按快捷键contrlA,随后contrlc复制里面所有的文件&#xff1b;…
阅读更多...
ubuntu 22.04 使用yaml文件 修改静态ip

ubuntu 22.04 使用yaml文件 修改静态ip

前提&#xff1a; 启动服务 sudo systemctl start systemd-networkd 设置开机自启 sudo systemctl enable systemd-networkd 检查状态&#xff08;确保显示 active (running)&#xff09; sudo systemctl status systemd-networkd 若想停止&#xff1a; 停止当前运行的服务 sud…
阅读更多...
闸机控制系统从设计到实现全解析:第 4 篇：Redis 缓存与分布式锁实现

闸机控制系统从设计到实现全解析:第 4 篇：Redis 缓存与分布式锁实现

第 4 篇&#xff1a;Redis 缓存与分布式锁实现 一、Redis 在系统中的核心作用票证信息缓存&#xff1a;将高频访问的票证数据&#xff08;如状态、有效期&#xff09;缓存至 Redis&#xff0c;减少数据库查询&#xff0c;提升验证响应速度。分布式锁&#xff1a;在高并发场景下…
阅读更多...
北京天津唐山廊坊沧州打捞日记

北京天津唐山廊坊沧州打捞日记

北京天津唐山廊坊沧州打捞日记 打捞搜蚯蚓疏通 北京&#xff1a;护城河畔的情谊打捞 清晨&#xff0c;北京的护城河在朝阳的映照下泛着微光。我接到一位年轻小伙的电话&#xff0c;声音中满是焦急。原来&#xff0c;他与女友在河边约会时&#xff0c;不小心将女友送他的定情玉佩…
阅读更多...
全志刷机工具：PhoenixSuit-全志芯片处理器-刷机工具安装包及最详细使用教程指南

全志刷机工具：PhoenixSuit-全志芯片处理器-刷机工具安装包及最详细使用教程指南

全志刷机工具&#xff1a;PhoenixSuit-全志芯片处理器刷机工具安装包及最详细使用教程指南&#xff0c;此文章主要是分享机顶盒、电视盒子&#xff0c;全志芯片盒子&#xff08;其中包含全志处理器、全志芯片、全志CPU等等&#xff09;的刷机工具、刷机工具安装教程以及如何使用…
阅读更多...
最新文章

Copyright @ 2022~2023