当前位置：首页 > news >正文

前端在for循环中使用Element-plus el-select中的@click.native动态传参

news 2025/7/18 18:19:16

<el-table    ref="table" :data="editTableVariables" @cell-dblclick="handleRowDblClick" style="width: 100%"  
> <!-- el-table-column: 表格列组件，定义每列的展示内容和属性 --><el-table-column prop="name" label="名称" width="150"> <!-- template标签：定义列内的自定义内容 --><template #default="scope"> <span>{{scope.row.name}}</span> <!-- 显示当前行的name属性值 --></template> </el-table-column>  <el-table-column prop="dataType" label="数据类型" width="80"> <template #default="scope"> <span>{{scope.row.dataType}}</span> <!-- 显示当前行的dataType属性值 --></template> </el-table-column> <el-table-column prop="accessLevel" label="读写权限" width="140"> <template #default="scope"> <!-- el-select: 下拉选择框组件 --><el-select  v-model="tableSelectValue[scope.row.nodeId]"  placeholder="请选择" size="small" style="width: 120px" > <!-- el-option: 下拉选项组件 --><el-option v-for="(item, index) in accessLevel" :key="scope.row.nodeId" :label="item.value" :value="item.value" @click.native="changeTableSelect(item, index, scope.row.writeMask, scope.row.nodeId)" /> </el-select> </template> </el-table-column> <el-table-column prop="value" label="初值" width="100"> <template  #default="scope">  <!-- template标签定义列内的自定义内容 --><span>{{scope.row.value === null ? "<空>" : scope.row.value}}</span> <!-- 根据条件显示值或空 --></template> </el-table-column> <el-table-column prop="address" label="使能" width="120"> <template #default="scope"> <el-input v-model="scope.row.address" @change="handleEdit(scope.$index, scope.row)"></el-input> <!-- 输入框，绑定地址属性 --></template> </el-table-column> 
</el-table>

代码解释：

: element-plus表格组件，用于展示数据。
- ref=“table”: 为table设置引用，可以通过该引用获取table的实例。
- :data=“editTableVariables”: 绑定表格的数据源为editTableVariables。
- @cell-dblclick=“handleRowDblClick”: 监听表格的双击事件，触发handleRowDblClick方法。
- style=“width: 100%”: 设置表格的宽度为100%。

表格列解释：

el-table-column: 表格列组件，定义每列的展示内容和属性。
- prop: 表示列对应数据源中的属性。
- label: 列的标题名称。
- width: 列的宽度。
- template: 列内的自定义内容，使用#default="scope"来获取当前行的数据。

组件解释：

el-select: element-plus下拉选择框组件，用于选择读写权限。
- v-model=“tableSelectValue[scope.row.nodeId]”: 将下拉框的选中值与tableSelectValue对象中对应scope.row.nodeId属性进行双向绑定。
- placeholder=“请选择”: 设置未选中时的提示文字。
- size=“small”: 设置下拉框的尺寸为小号。
- :key=“scope.row.nodeId”: 为循环中的每个选项设置唯一标识符。