el-button点击事件带参数
时间: 2023-07-06 07:31:25 浏览: 405
如果你是在使用 Element UI 的 el-button 组件,你可以通过绑定点击事件时的参数来实现带参数的点击事件。具体步骤如下:
1. 在模板中定义一个带有参数的方法,例如:
```
<el-button @click="handleClick('hello')">点击我</el-button>
```
2. 在 Vue 实例中定义该方法,例如:
```
methods: {
handleClick(param) {
console.log(param);
}
}
```
这样,在点击按钮时,就会调用 handleClick 方法,并将参数 'hello' 传递给该方法。在控制台中会输出参数值 'hello'。
相关问题
js 调动el-table点击事件
可以通过在el-table组件中绑定@click事件来调用js函数。在函数中,可以使用参数来接收点击的行数据,然后进行相应的操作。具体实现方法如下:
```html
<el-table :data="tableData" @row-click="handleClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="modifyWork(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
```
```javascript
methods: {
handleClick(row) {
console.log(row); // 输出点击的行数据
},
modifyWork(item) {
this.getAdministrativePost(); // 调用接口
this.dialogVisible4 = true; // 打开对话框
console.log('1434', item);
this.currentObj2 = item; // 将数据存储在这个对象中
}
}
```
给整个所有的el-button添加loading事件
你可以使用 Element UI 提供的全局配置来为所有的 `<el-button>` 组件添加 loading 事件。具体实现步骤如下:
1. 在 `main.js` 中导入 Element UI:
```js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
2. 在 `main.js` 中配置全局 loading 样式:
```js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
// 全局 loading 样式配置
loading: {
text: 'Loading...', // loading 文字
background: 'rgba(0, 0, 0, 0.7)', // 背景色
spinner: 'el-icon-loading', // loading 图标
fullscreen: true // 是否全屏显示
}
});
```
在上面的代码中,我们使用了 `Vue.use(ElementUI, options)` 方法来配置全局 loading 样式。其中,`options` 对象中的 `loading` 属性用于配置全局 loading 样式。这里我们配置了 loading 文字、背景色、loading 图标、是否全屏显示等参数。
3. 在组件中使用 `<el-button>` 组件:
```html
<template>
<el-button @click="fetchData">加载数据</el-button>
</template>
```
在上面的代码中,我们在组件中使用了 `<el-button>` 组件,并且添加了 `@click` 事件,当点击按钮时会触发 `fetchData` 方法。
4. 在 `fetchData` 方法中使用 `this.$loading` 显示 loading 样式:
```js
export default {
methods: {
fetchData() {
const loadingInstance = this.$loading({
text: 'Loading...', // loading 文字
background: 'rgba(0, 0, 0, 0.7)', // 背景色
spinner: 'el-icon-loading', // loading 图标
fullscreen: true // 是否全屏显示
});
// 发送请求获取数据
// ...
loadingInstance.close(); // 数据加载完成后关闭 loading 样式
}
}
}
```
在上面的代码中,我们在 `fetchData` 方法中使用 `this.$loading` 方法显示 loading 样式,并且传入了 loading 文字、背景色、loading 图标、是否全屏显示等参数。在数据加载完成后,我们调用 `loadingInstance.close()` 方法关闭 loading 样式。
通过上面的步骤,我们就为所有的 `<el-button>` 组件添加了 loading 样式。当点击按钮时,会触发 `fetchData` 方法,该方法中会显示 loading 样式,直到数据加载完成后关闭 loading 样式。