【解决问题】vue el

您所在的位置：网站首页 › vue数据嵌套多了页面不渲染 › 【解决问题】vue el

【解决问题】vue el

2023-05-12 11:05| 来源: 网络整理| 查看: 265

需求：

在一个表格内镶嵌一个表格，镶嵌的表格会根据所展开的行来发送请求并将最新数据渲染在页面上。采取的是手风琴效果，即只显示一行的数据

问题：镶嵌表格的数据更新了，但是页面没有及时渲染

解决：

用官方提供的expand-change方法，每次关闭或展开行都会触发用模板包裹镶嵌表格，并规定插槽作用域slot-scope="props" 在镶嵌表格中，用:key="props.row.id"指明身份用v-loading来增强效果（如果不加，可能会先看到原来的数据，效果不好）

模板部分：

复制代码

data部分：

//主表格数据 tableData: [], //镶嵌表格数据 loading:false, tableInfoData:[], 复制代码

methods部分：展开行获取数据

//第一个参数是展开的行数据；第二个参数是一个数组，里面是所有展开的行 async expandChange(row,expandRows){ this.loading=true let id=row.id //定义展开行id let expandid='' //手风琴效果 const $orderTable = this.$refs.orderTable if(expandRows.length>1){ expandRows.forEach(expandRow=>{ //拿刚刚点击的行与现目前展示的行作比较，id不一致即表示要关闭其他展开行 if(id!==expandRow.id){ //toggleRowExpansion是官方提供的方法，用于改变某一行的展开状态 $orderTable.toggleRowExpansion(expandRow, false) } }) }else{ //获取展开行id expandid=expandRows[0].order_id } //请求镶嵌表格的数据，假设需要发送参数——展开行的id： const res = await getDetails({ id:expandid, }); if (res.msg === "ok") { this.tableInfoData = Array.from(res.data); this.loading=false } }, 复制代码

其中getDetails是引入的方法：

export function getDetails(params) { const url = '...' return $axios.get(url, params) } 复制代码

【本文地址】

【解决问题】vue el

【解决问题】vue el

今日新闻

推荐新闻