广东两学一做网站,如何登陆网站空间,手机软件页面设计网站,余姚网站推广vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。
示例效果如下#xff1a; 【方式一】
给Table组件设置表格的“展开行配置”参数#xff1a;expandable
a-table :expandableexpandable/a-t…vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。
示例效果如下 【方式一】
给Table组件设置表格的“展开行配置”参数expandable
a-table :expandableexpandable/a-table结合“自定义展开行内容”参数expandedRowRender引入h()函数、引入Table组件
import {h } from vue;
import { Table } from arco-design/web-vue;整体示例代码如下具体信息已用注释形式标出
// template
a-table :expandableexpandable/a-table // 父表格// script
script langts setupimport {h } from vue;// 引入h()组件
import { Table } from arco-design/web-vue; // 引入Table组件const expandable reactive({title: , // 上图左上角格子的展示值width: 60, // 根据需要设置宽度为了使左侧第一列空白只展示 -expandedRowRender: (record: any) { // record:当前行数据if (record.id 1) { // 根据自己需要选择让某行具有展开效果return h(Table, { // Table组件已在上方引入pagination: false, // 隐藏分页columns: [ // columns数组值调取接口获取{title: ,dataIndex: ,width: 60, // 设置空白列为了使左侧第一列只展示 -},{title: 子名称,dataIndex: name,},{title: 子金额,dataIndex: salary,},{title: 子地址,dataIndex: address,},{title: 子邮箱,dataIndex: email,},],data: [ // data内容调取接口获取{key: 1,name: 张三,salary: 23000,address: 32 Park Road, London,email: 1example.com,},{key: 2,name: 李四,salary: 25000,address: 35 Park Road, London,email: 2example.com,},{key: 3,name: 王五,salary: 22000,address: 31 Park Road, London,email: 3example.com,},{key: 4,name: 马六,salary: 17000,address: 42 Park Road, London,email: 4example.com,},],});}return false;},});
/script【方式二】
给Table组件设置表格的“展开行配置”参数expandable结合expand-row插槽
示例代码如下
// template
a-table :expandableexpandabletemplate #expand-row{ record }// 下面展示子表格,根据需求对子table进行属性配置a-table/a-table/template
/a-table
// script
const expandable reactive({title: , // 上图左上角格子的展示值width: 60,
})
