const handleCheck = (rowKeys: DataTableRowKey[]) => { emit('checkedRowList', rowKeys) } 5、固定表头 增加表格最大高度达到固定表头的效果。设置:max-height="tableHeight" //使用计算,使表格自适应constscreenHeight =document.documentElement.clientHeight||window.innerHeightconsttableHeight = screenHeight ...
再根据前一项的数据去表格中取消选中对应的那一行 singleTableRef.value.toggleRowSelection(preRow, false); } console.log("selection", selection[0]?.date); }; 完整代码 复制粘贴即用 <template> <div> <el-table class="myTable" ref="singleTableRef" :data="tableData" row-key="id" style="...
columns:定义表格的列配置,每个列配置使用el-table-column组件。 border:是否显示表格边框,可选值为true或者false。 stripe:是否显示斑马纹样式,可选值为true或者false。 show-header:是否显示表格头部,可选值为true或者false。 highlight-current-row:是否高亮当前行,可选值为true或者false。 row-key:指定行的唯一标...
-- row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" --><el-table:data="tableData"centerborderalign="left"style="width: 100%"@selection-change="handleSelectionChange":row-key="rowId"lazy:load="loadChildren":tree-props="{children: 'children', hasChildren: '...
这个是table 这个是table,看起来像tree,实际是table,在不需要多选的情况下,用table操作起来更方便一些。 自己封装了一下,实际操作还是 ant的功能。 <BasicTable@register="register"><template#toolbar><a-buttontype="primary"@click="expandAll">展开</a-button><a-button@click="collapseAll">折叠</a-button...
<template><divclass="draggable"style="padding:20px"><el-tablerow-key="id":data="state.tableData"style="width:100%"><el-table-columnv-for="(item,index) in state.oldList":key="`col_${index}`":prop="state.newList[index].prop":label="item.label"align="center"></el-table-column>...
这个是table 这个是table 这个是table,看起来像tree,实际是table,在不需要多选的情况下,用table操作起来更方便一些。 自己封装了一下,实际操作还是 ant的功能。 <BasicTable @register="register"> <template #toolbar> <a-button type="primary" @click="expandAll">展开</a-button> ...
我们知道 el-row、el-col 可以实现多行多列的功能,那么能不能结合一下呢?官网也不直说,害的我各种找,还好找到了。(好吧,其实折腾了一阵着的table) 二者结合一下就可以了,这里有个小技巧,el-row 只需要一个就可以,el-col 可以有多个,这样一行排满后,会自动排到下一行。
这个对象中的key对应表格数据中的prop,value对应实际显示的label,这样通过一个简单的对象,就可以连接表头和表格body之间的关系。然后还需要后端返回具体的表格数据: tableData: [{ name: '张三', date: '2016-05-02', address: '上海市普陀区金沙江路 1518 弄', ...