饿了么ui组件table点击tr展开单行

首先官方给出的案例：

<template><el-table:data="tableData"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-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-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"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 {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'}, {id: '12987126',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}]}}}
</script>

我们按照步骤来，根据文档查阅内涵row-key、@row-click、expand-row-keys

那么我们代码只需要在el-table标签属性中新增：

row-key="id" @row-click="rowClick" :expand-row-keys="expands"

id是我们的数据id，rowClick则是一个函数 expands则对应一个数组

如果表格中内涵@click这类事件，需要新增.stop.prevent 事件冒泡

接下来编写数组删除组件utils/arr.js;

// 数组原型上扩展删除方法
Array.prototype.remove = function (val) {let index = this.indexOf(val);if (index > -1) {this.splice(index, 1);}
};

引入我们的数组删除

import "@/utils/arr";

在date中新增：

data() {return {...expands: [] //要展开的行，数组的元素是row的key值...}
}

最后只需要编写点击的table函数即可

// table 单行点击，展开详情rowClick(row, event, colum) {if (this.expands.indexOf(row.id) < 0) {this.expands = [];this.expands.push(row.id);} else {this.expands.remove(row.id);}},

主要的文件源码只有2个

arr.js与table.vue

table.vue源码：

<template><el-table:data="tableData"style="width: 100%"><el-table-column type="expand" row-key="id" @row-click="rowClick" :expand-row-keys="expands"><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-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"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>
import "@/utils/arr";
//引入我们的数组export default {data() {return {expands: [], //要展开的行，数组的元素是row的key值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'}, {id: '12987126',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}]}},methods: {// table 单行点击，展开详情rowClick(row, event, colum) {if (this.expands.indexOf(row.id) < 0) {this.expands = [];this.expands.push(row.id);} else {this.expands.remove(row.id);}},
}}
</script>

饿了么ui组件table点击tr展开单行相关推荐

swagger2中UI界面接口点击无法展开问题解决
背景最近往自己的框架里集成swagger,发现一个奇怪的问题,当我的tag是中文的时候.发现点击展开不生效,只能点击全部展开,这就十分不方便了.如下图只能点击expand operations. 解 ...
饿了么ui组件中分页获取当前选中的页码值_【Web技术】314 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
饿了么UI组件库中，Image组件预览图片错位的解决
使用过elementUI组件库中的Image组件基本都知道,其组件会自带一个图片预览功能,仅需要通过preview-src-list传入需要预览的图片url列表即可实现点击预览. 博主使用了此功能,进 ...
SpringMvc+饿了么UI组件+七牛云做图片上传
前言我之前也有用过SpringBoot+OSS做过云存储,可以去看我的文章https://blog.csdn.net/Curtisjia/article/details/109339980,当时我做 ...
layui table点击tr更改当前行颜色
第一种方式需要layui 2.4.0版本 table.on('row(grid)', function(obj){$(".layui-table-body tr ").attr({ ...
Vue table 点击按钮展开折叠面板
vue 实现的 table 折叠展开功能,由于工作中用到,这里把相应代码整理下,方便自己日后 Copy 1.Html 部分由基本的 table 表单与折叠栏部分组成 PS:table 上需要加上 r ...
饿了吗 ui 行拖拽处理
饿了吗ui的table表格使用行拖拽的需求首先我们需要 npm install sortablejs --save-dev 安装sortable.js 在页面找到需要被拖拽的表格定义row-ke ...
推荐几个 VUE UI组件库
PC端 1. Element Plus - 饿了么 UI 组件库在 2022 年春节后第一个工作日,饿了么大前端团队发布了 Element Plus 正式版,标志着 Element 正式支持 Vue ...
muse ui 的table组件的选择事件说明
muse ui是一套基于vue 2.0的ui组件,它的点击特效.组件模型等都特别适合移动端开发,今天在做一个移动项目是,用到里面的table组件,对其进行选择行操作,根据官方文档的提示一直不解.提示如 ...

饿了么ui组件table点击tr展开单行

饿了么ui组件table点击tr展开单行相关推荐

最新文章

热门文章