Vue Element组件库Table展开行,当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
该功能默认是和表格使用相同的数据,本章内容是通过展开行触发请求获取新数据并展示。
<template> <el-table :data="tableData" row-key="id" :expand-row-keys="expandKeys" @expand-change="expandChange" 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.vendor}}</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 { form:{ id: '', name: '', desc: '', vendor:'' }, expandKeys:[], tableData: [] } }, methods:{ expandChange(row,expandRows){ if(this.expandKeys.indexOf(row.id) >= 0){ //首期当前行 this.expandKeys.shift() return; } //恢复默认值 let _this = this _this.checklist = {} const data = { "id": row.id, } axios .post(maintainFront.api_url + "getInfo", JSON.stringify(data)) .then(res => { _this.checklist = res.data if (JSON.stringify(_this.checklist) == '{}'){ _this.expandKeys.shift() _this.expandKeys.push(row.id) altert("信息为空") }else{ row["vendor"] = _this.checklist["vendor"] _this.expandKeys.shift() _this.expandKeys.push(row.id) } }) .catch(function (error){ console.log(error); }); if (expandRows.length >1){ expandRows.shift() } } } } </script>
原文链接:https://blog.csdn.net/qq_42352516/article/details/117260504
本文链接:https://jeff.xin/post/127.html
--EOF--
发表于 2022-07-19 ,并被添加「 Vue 」标签 。
Comments
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。