el-row click

el-row的点击事件可以通过在@click前加上.native来实现。例如：<el-row class="register" @click.native="goRegister()">还没有账号，去注册</el-row>。

在使用element-ui的el-row时，直接使用@click="fn"无法触发点击事件，但在其内部或外部加上自己写的html标签（如div、span）是可以生效的。

至于监听el-table的滚动，可以通过row-click=rowClick来实现。

在使用el-row时，有时候参数row-class-name可能会无效。解决方法是确保将正确的参数传入，并检查控制台输出的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

<template> <div class="login"> <el-card class="login-info"> <el-header style="height: 50px"> <el-icon class="iconfont icon-denglu1"></el-icon> 欢迎登录 </el-header> <el-container> <el-form style="width: 100%"> <el-form-item> <el-input type="text" v-model="formData.userName" prefix-icon="iconfont icon-denglu" placeholder="账号"></el-input> </el-form-item> <el-form-item> <el-input type="password" v-model="formData.password" prefix-icon="iconfont icon-mima" placeholder="密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" style="width: 100%" @click="login">登录</el-button> </el-form-item> <el-row>账号：test01，密码：123456</el-row> <el-row>账号：test02，密码：123456</el-row> <el-row>账号：test03，密码：123456</el-row> </el-form> </el-container> </el-card> </div> </template>

这是一个使用ElementUI组件库和Vue.js框架编写的登录页面的模板，其中：

1. `el-card` 是一个卡片组件，它包含了登录窗口的所有内容。

2. `el-header` 是一个头部组件，用于显示页面标题和图标。

3. `el-container` 是一个容器组件，用于包含表单。

4. `el-form` 是一个表单组件，包含了输入框和登录按钮。

5. `el-form-item` 是表单项组件，包含了每个输入框和登录按钮。

6. `el-input` 是一个输入框组件，用于输入账号和密码。

7. `v-model` 是Vue.js中的指令，用于实现双向数据绑定，将输入框的值绑定到Vue实例中的 `formData` 对象的属性上。

8. `prefix-icon` 是前缀图标属性，用于在输入框前面显示一个图标。

9. `el-button` 是一个按钮组件，用于登录。

10. `@click` 是Vue.js中的事件绑定语法，用于将点击事件绑定到Vue实例中的一个方法 `login` 上。

11. `el-row` 是一个行组件，用于显示测试账号信息。

通过这些组件和指令，实现了一个简单的登录页面。

el-row里面还可放el-row

el-row里面可以放el-row，但是需要注意的是el-row内部的el-row会独立占据一行的空间。这意味着在一个el-row中放置另一个el-row会导致两个el-row并排显示，而不是嵌套在同一行中。因此，如果需要在el-row中创建多行布局，可以使用el-row和el-col的组合来实现。每个el-row可以包含多个el-col，而el-col可以进一步嵌套el-row来实现多层布局。这样可以更好地控制并排和嵌套的关系，以实现灵活的页面布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Element-Plus el-col、el-row快速布局](https://blog.csdn.net/qq_52697994/article/details/124694885)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]