西安做企业网站,河南如何做网站,网络课程网站模板,图片网站的优化文章目录 1、小记2、页面3、typescript事件4、测试数据5、样式 1、小记
element-plus中el-table 的 expand,箭头控制子项显示#xff0c;有点丑。 想实现类似bootstrap #xff0c;用按钮 展开/隐藏子项的功能
2、页面
!-- 表内容 --el-table:datatabl… 文章目录 1、小记2、页面3、typescript事件4、测试数据5、样式 1、小记
element-plus中el-table 的 expand,箭头控制子项显示有点丑。 想实现类似bootstrap 用按钮 展开/隐藏子项的功能
2、页面
!-- 表内容 --el-table:datatableData:bordertrue:preserve-expanded-contenttruestylewidth: 100%:expand-row-keysexpands:row-keygetRowKeys!-- 子项 --el-table-column typeexpand width0!-- width隐藏列 --template #defaultpropsdiv m4 classexpandcontentel-table :dataprops.row.family :bordertrue :colorredel-table-column labelName propname /el-table-column labelState propstate /el-table-column labelCity propcity /el-table-column labelAddress propaddress /el-table-column labelZip propzip //el-table/div/template/el-table-column!-- 其他数据列 --el-table-column labelDate propdate /el-table-column labelName propname /!-- 操作 --el-table-column labelOperationstemplate #defaultpropsel-button typeprimary clicktoggleExpand(props.row){{ isExpanded(props.row) ? 收起 : 展开 }}/el-button/template/el-table-column/el-table3、typescript事件
script setup langtsx
const getRowKeys (row) {return row.id
}
//展开自定义
const expands refstring[]([])
const toggleExpand (row) {const key getRowKeys(row)const index expands.value.indexOf(key)if (index -1) {expands.value.splice(index, 1) // 收起} else {expands.value.push(key) // 展开}
}
const isExpanded (row) {return expands.value.includes(getRowKeys(row))
}
/script4、测试数据
const tableData [{id: 1,date: 2016-05-03,name: Tom,state: California,city: San Francisco,address: 3650 21st St, San Francisco,zip: CA 94114,expand: false,family: [{name: Jerry,state: California,city: San Francisco,address: 3650 21st,zip: CA 94114},{name: Spike,state: California,city: San Francisco,address: 3650 21st ,zip: CA 94114},{name: Tyke,state: California,city: San Francisco,address: 3650 21st ,zip: CA 94114}]},{id: 2,date: 2016-05-02,name: Tom,state: California,city: San Francisco,address: 3650 21st St, San Francisco,zip: CA 94114,expand: false,family: [{name: Jerry,state: California,city: San Francisco,address: 3650 21st St, San Francisco,zip: CA 94114}]}
]5、样式
!-- 样式 --
style scoped langscss
// 子项背景色
:deep(.el-table__expanded-cell) {background-color: #cbdde2 !important;
}
// 子项居中
.expandcontent {width: 95%;margin: 0 auto;
}
/style
