首页 > 其他分享 >easy-ui展开行配置用法(两种)

easy-ui展开行配置用法(两种)

时间:2023-07-25 11:23:21浏览次数:33  
标签:render 配置 用法 ui easy params type expand

第一种:用expand属性

<easy-custom-table
      rowKey="id"
      :expand="expand" //添加expand属性,属性值为一个对象
      :tableData="tableData"
      :columns="columns"
      :maxHeight="tableHeight"
      :headerCellStyle="{ background: '#e7ecf6' }"
></easy-custom-table>

在data中配置expand,expand属性的配置为render函数

expand: {
        render: (h, params) => {
          return (
            <easy-custom-table
              border={true}
              tableData={params.row.rawMaterialTraceChildren}
              columns={this.childTitles}
              headerCellStyle={{ background: '#f5f7fa' }}
            ></easy-custom-table>
          )
        }
 },

第二种:利用columns配置expand

<easy-custom-table
      rowKey="id"
      :tableData="tableData"
      :columns="columns" //在columns中配置展开行
      :maxHeight="tableHeight"
      @search="pageChange"
      :headerCellStyle="{ background: '#e7ecf6' }"
></easy-custom-table>
{
          label: '',
          type: 'expand',
          render: (h, params) => {
            return (
              <easy-custom-table
                border={true}
                tableData={params.row.rawMaterialTraceChildren}
                columns={this.childTitles}
                headerCellStyle={{ background: '#f5f7fa' }}
              ></easy-custom-table>
            )
          }
        },

添加一行type为expand,也用render函数渲染

标签:render,配置,用法,ui,easy,params,type,expand
From: https://www.cnblogs.com/zengyu123/p/17579298.html

相关文章

  • Unity UGUI的EventSystem(事件系统)组件的介绍及使用
    UnityUGUI的EventSystem(事件系统)组件的介绍及使用1.什么是EventSystem组件?EventSystem是UnityUGUI中的一个重要组件,用于处理用户输入事件,如点击、拖拽、滚动等。它负责将用户输入事件传递给合适的UI元素,并触发相应的事件回调函数。2.EventSystem组件的工作原理EventSystem......
  • 使用Varnish代替Squid做网站缓存加速器的详细解决方案
    [文章作者:张宴本文版本:v1.2最后修改:2008.01.02我曾经写过一篇文章──《初步试用Squid的替代产品──VarnishCache网站加速器》,但当时仅仅是用着玩,没做深入研究。今天写的这篇关于Varnish的文章,已经是一篇可以完全替代Squid做网站缓存加速器的详细解决方案了。网上关于V......
  • Unity UGUI的RawImage(原始图片)组件的介绍及使用
    UnityUGUI的RawImage(原始图片)组件的介绍及使用1.什么是RawImage组件?RawImage是UnityUGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。2.RawImage组件的工作原理RawImage组件通过将原始图片的像素数据直......
  • Day08_for循环+print补充用法
    1.for循环和while循环取值: 2.for循环字典: 3.for循环字符串: 4.总结for循环和while循环的异同: 5.for循环控制循环次数:range() 6.for+break和for+else: 7.range(): 8.for+continue: 9.for循环嵌套: 10.print补充用法: ......
  • 前端请求报错:'JSON parse error: syntax error, expect {, actual e…1, line 1, colu
    1、如果不用JSON.stringify(inputJson)包起来就会报错letinputJson={"selectUid":selectUid};varresponse=await$.ajax({type:'POST',url:'xxx',data:inputJson,//正确的是JSON.stringify(inputJson)......
  • POI和 easyExcel学习
    POI-Excel写<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://......
  • [SWPUCTF 2021 新生赛]easy_md5
    [SWPUCTF2021新生赛]easy_md5题目来源:nssctf题目类型:web涉及考点:PHP弱比较1.又是一道代码审计题,题目页面如下<?phphighlight_file(__FILE__);include'flag2.php';if(isset($_GET['name'])&&isset($_POST['password'])){$name=$_GET[&......
  • element-ui 周、月、季、年的日期时间选择器
    日常做项目中经常会遇到根据周、月、季度、年的日期时间选择器,切换不同的时间时选择器也做出相对应的变化,并且获取相对的开始时间和结束时间。效果如下:  1.先创建子组件--季度的日期选择器 1<template>2<divclass="time_quarter">3<markstyle="posi......
  • this.$nextTick的用法
    一、总述定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,回调函数获取更新后的dom再渲染出来;$nextTick类似于一个非常高级的定时器,自动追踪DOM更新,更新好了就触发语法:this.$nextTick(回调函数),例如://修改按钮操作updateCateBtnFn(obj){......
  • 初级设计师必看的UI设计组件库
    UI组件库是一个可以理解为重复使用界面设计元素的集合,是一个文件库。UI组件库在整个系统中起着行为层面的作用,是团队内部设计师与开发者之间的横向合作,是保证产品产出一致的标准基础。即时设计资源社区提供丰富的组件库,包括不同行业、不同顶级互联网厂商的UI组件库!可以免费一键使......