element-ui表格展开行每次只能展开一行
UI 表格 Element 一行 展开 只能 每次
2023-09-27 14:22:17 时间
element-ui表格展开行每次只能展开一行
<template>
<el-table
:data="tableData"
:expand-row-keys="expands"
:row-key='getRowKeys'
@expand-change="expandChangeHandler"
style="width: 100%">
<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>
</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>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
getRowKeys(row) {
return row.id;
},
//存放展开的id
expands: [],
}
},
methods:{
// 点击展开的时候就会触发这个方法
expandChangeHandler(row, expandedRows) {
console.log('expandedRows',expandedRows)
console.log('row',row)
if (expandedRows.length) {
this.expands = [];
if (row) {
this.expands.push(row.id);
}
} else {
this.expands = [];
}
}
}
}
</script>
<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>
相关文章
- 微信小程序setData让数据更新到UI
- [置顶] 安卓UI组件之ListView详解
- vue element-ui表格里时间戳转换成时间显示
- element ui表格的校验和自定义校验规则
- iOS中 UICollectionView UI_19
- 为公司架构一套高质量的 Vue UI 组件库
- 超炫酷的 Docker 终端 UI lazydocker
- 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局
- Android优化——UI检视利器:Hierarchy Viewer
- 安卓开发入门教程-UI控件_ProgressBar
- Android UI效果篇-(1)Ripple
- vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入
- 【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
- element-ui 的表格里面使用 el-popover 实现编辑弹层功能