⭐先看案例,想要点击勾选el-table的复选框后获取那一行的id或者name或者其他字段都是可以的举一反三。包括我已经把勾选后的数据重新展示在页面上了。下面为主要步骤。 ⭐第一步: 渲染完表格 给表格加上事件 @selection-change="handleSelectionChange" <el-table ref="multipleTable" :data="tableDataInfo" ...
</el-table> ``` 在上面的示例中,selectedData变量用来绑定选中的行数据,tableData是用来展示的数据列表。 2. 通过selection-change事件获取选中的行数据 element-plus的table组件提供了selection-change事件来监听选中的行数据的变化,当用户勾选或取消勾选时,可以通过这个事件来获取选中的行数据。示例代码如下: ```...
getSelectionRows 方法用于获取当前选中的所有行数据,它的使用非常简单。我们只需要在表格中使用 ref 属性定义一个引用名,然后就可以在代码中通过该引用名来调用 getSelectionRows 方法获取选中行的数据了。 下面是一个简单的示例代码: ``` <template> <el-table :data="tableData" ref="table"> <el-table-column...
element-plus el-table selection-change索引 element-plus中的el-table组件提供了selection-change属性,可以在选择项发生改变时触发该事件。 在selection-change事件中,可以获取到选中的行数据和索引。选中的行数据可以通过selectedRows属性获取,而索引可以通过selectedRowKeys属性获取。
ref="singleTableRef" ——> 用于调用 table 组件的方法 setCurrentRow(setCurrentRow 用于单选表格,设定某一行为选中行)highlight-current-row ——> 用于高亮当前行@row-click="handleCurrentChange" ——> 当某一行被点击时会触发该事件 注意 在 onMounted 生命周期钩子 DOM 元素才被创建和渲染,所以 通过 re...
3.获取选中行的数据 使用selection-change事件,代码如下: <el-tableclass="mytable":data="tableData":row-key="enrollId"style="width: 100%; margin-top: 30px"@selection-change="handleSelectionChange">consthandleSelectionChange=(val:any)=>{//val即为checkbox选中的行对应的数据,值为一个数组// 在此...
tableData, handleRowClick } } } </script> 4. 显示小三角 在handleRowClick 方法中,可以通过操作 DOM 元素来在选中的行前面显示一个小三角。可以使用事件对象 event 中的相关属性来获取点击的行的位置信息,然后再向该位置添加一个小三角元素。 通过以上方法,就可以在 Vue3 中使用 Element Plus 的表格组件,...
<el-table-column type="selection" :reserve-selection="false" /> 1. 2. 3. 4. 5. 6. 7. 8. @select-all="onSelectAll" 全选是触发的事件 1. @selection-change="selectItem" 单个去勾选时触发的事件(勾选有变化时触发) 1. @row-click="onSelectOp" 点击那一行数据触发的事件 ...
<el-table-column prop="name" label="产品名称" min-width="120 " > <template #default="scope"> <el-row class="product-name"> <el-image class="pro-img" v-if="scope.row.pic" :src="scope.row.pic"></el-image> <img class="pro-img" v-else src="../../../../../../...
同时给每个表单绑定的字段在每一行的数据中加一个对应的'${key}_isEditing'字段,类型为Boolean,点击时修改这个字段为true或false,同时使用v-if控制当前td的表单控件的显示与隐藏。 主要比较难的就是上面三个功能的实现,其他的增删改都是围绕着<el-table>的当前选中行进行操作的。 具体组件源码如下:...