| Vue table 点击按钮展开折叠面板 | 您所在的位置：网站首页 › 表格折叠怎么操作的 › Vue table 点击按钮展开折叠面板 |
Vue table 点击按钮展开折叠面板
|
vue 实现的 table 折叠展开功能，由于工作中用到，这里把相应代码整理下，方便自己日后 Copy 1.Html 部分由基本的 table 表单与折叠栏部分组成PS：table 上需要加上 ref，以便方法中能够获取到 table 属性 {{ id }} {{ name }} 详情 aaa 2. vue 的 JS 部分 export default { data() { return { list: [{ id: '1', name: '王小1', }, { id: '2', name: '王小2', }, { id: '3', name: '王小3', }, { id: '4', name: '王小4', }] } }, methods: { // 展开行效果 toogleExpand(row) { const $table = this.$refs.table // 注意，这里的 this.list 是上面 data 中的 list // 通过比对数据与行里的数据，对展开行进行控制，获取对应值 this.list.map((item) => { if (row.id !== item.id) { $table.toggleRowExpansion(item, false) } }) $table.toggleRowExpansion(row) }, } } 3.css 部分这里除了基本的属性外，主要我发现展开栏部分会有空白各自部分，还能拖开，因此加属性把多余部分给隐藏掉 下方有注释 /* 展开行样式 */ .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: 100%; } .el-form-item__content { width: 100%; } /* 隐藏上方表格多余部分 */ .undefined.el-table__expand-column { display: none; } /* 隐藏上方表格多余部分 */ .el-table_1_column_8 .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { border-right: 0px solid #ebeef5 } 4.效果图这个效果图是我后面补的，但是功能是以上面来做的
|
【本文地址】
公司简介
联系我们