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
英文地址，請注明出處：http://en.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