element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能
更新時(shí)間：2018年12月04日 10:27:14 作者：小蟲1
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
element ui是一個(gè)非常不錯(cuò)的vue的UI框架，element對(duì)table進(jìn)行了封裝，簡(jiǎn)化了vue對(duì)表格的渲染。
element ui表格中有一個(gè)功能是展開行，在2.0版本官網(wǎng)例子中，只可以點(diǎn)擊右箭頭可以展開，我們的很多需求是點(diǎn)擊某一行展開
那是不是無法實(shí)現(xiàn)呢？其實(shí)，借助element ui的一些屬性，輕松實(shí)現(xiàn)點(diǎn)擊某行展開，我們還是用2.0.9版本官網(wǎng)的例子，
對(duì)齊改造，使之可以做到這點(diǎn)
<template>
<el-table
:data="tableData5"
style="width: 100%"
row-key="id"
:expand-row-keys="expands"
@row-click="rowClick">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名稱">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="所屬店鋪">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="店鋪 ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分類">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="店鋪地址">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名稱"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script>
export default {
data() {
return {
tableData5: [{
id: '12987122',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
// 要展開的行，數(shù)值的元素是row的key值
expands: []
}
},
methods:{
//在<table>里，我們已經(jīng)設(shè)置row的key值設(shè)置為每行數(shù)據(jù)id：row-key="id"
rowClick(row, event, column) {
Array.prototype.remove = function (val) {
let index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
if (this.expands.indexOf(row.id) < 0) {
this.expands.push(row.id);
} else {
this.expands.remove(row.id);
}
}
}
}
</script>
這個(gè)例子可以直接復(fù)制運(yùn)行起來，一點(diǎn)問題都沒有，上面的代碼可以實(shí)現(xiàn)點(diǎn)擊某行展開，對(duì)比官網(wǎng)的例子，我們?cè)趖able添加了
row-key="id" :expand-row-keys="expands" @row-click="rowClick"
這里有2個(gè)問題：
1.數(shù)據(jù)中每項(xiàng)沒有一個(gè)唯一標(biāo)示怎么辦？
2.實(shí)現(xiàn)展開當(dāng)前行的時(shí)候，其他行都能收起來
這2個(gè)問題也很簡(jiǎn)單。第2個(gè)問題，在rowClick函數(shù)給expands添加之前，先清空這個(gè)數(shù)組。
if (this.expands.indexOf(row.id) < 0) {
this.expands = []
this.expands.push(row.id);
} else {
this.expands.remove(row.id);
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例
今天小編就為大家分享一篇vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，值得收藏2023-04-04
Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件
這篇文章主要為大家詳細(xì)介紹了Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯(cuò)時(shí)，有能力重新發(fā)起加載組件的請(qǐng)求。異步組件加載失敗后的重試機(jī)制，與請(qǐng)求服務(wù)端接口失敗后的重試機(jī)制一樣2023-01-01
vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
使用Element時(shí)默認(rèn)勾選表格toggleRowSelection方式
這篇文章主要介紹了使用Element時(shí)默認(rèn)勾選表格toggleRowSelection方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，簡(jiǎn)化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫針對(duì)table表格和form表單場(chǎng)景，這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-10-10