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

<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”: 为循环中的每个选项设置唯一标识符。

方法介绍：

• handleEdit(index, row): 处理编辑操作的方法，传入索引和行数据。
• changeTableSelect(item, index, writeMask, nodeId): 处理下拉选择框选中事件的方法，传入选项、索引、写权限和节点ID。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！

原文地址：https://blog.csdn.net/weixin_43891869/article/details/140116739

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！