在D2admin框架里,使用了d2-crud-plus组件,帮我在rowHandle里自定义一个按钮事件,加一个custom,emit:build_job ,然后监听自定义按钮事件,用户点击时弹出提示框,用户点击确认后发送当前行的数据到后端,并根据后端返回的状态时给出不同的提示框
时间: 2024-05-12 20:19:03 浏览: 12
在rowHandle里自定义一个按钮事件可以通过添加一个slot来实现,具体步骤如下:
1. 找到需要添加自定义按钮事件的表格组件,例如在DemoCrud.vue中:
```html
<d2-crud-x
ref="d2Crud"
:columns="columns"
:data="data"
:options="options"
@dialog-open="handleDialogOpen"
@dialog-cancel="handleDialogCancel"
@dialog-save="handleDialogSave"
>
<template slot="rowHandle" slot-scope="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
<el-button @click="handleDelete(scope.row)">删除</el-button>
<!-- 添加自定义按钮 -->
<el-button @click="handleCustom(scope.row)">自定义按钮</el-button>
</template>
</d2-crud-x>
```
2. 在methods中添加handleCustom方法:
```js
methods: {
// ...
handleCustom(row) {
// 触发自定义事件
this.$emit('build_job', row)
},
// ...
}
```
其中,`this.$emit('build_job', row)`表示触发build_job事件,并将当前行的数据row作为参数传递出去。
3. 在父组件中监听build_job事件,并弹出提示框:
```html
<template>
<div>
<d2-crud-x
ref="d2Crud"
:columns="columns"
:data="data"
:options="options"
@dialog-open="handleDialogOpen"
@dialog-cancel="handleDialogCancel"
@dialog-save="handleDialogSave"
@build_job="handleBuildJob"
>
<!-- ... -->
</d2-crud-x>
</div>
</template>
<script>
export default {
// ...
methods: {
// ...
handleBuildJob(row) {
// 弹出提示框
this.$confirm(`确认要提交${row.name}的作业结果吗?`, '提示', {
type: 'warning'
}).then(() => {
// 发送数据到后端
this.$axios.post('/api/buildJob', row).then(res => {
if (res.code === 0) {
// 成功提示框
this.$message.success('提交作业成功')
} else {
// 失败提示框
this.$message.error('提交作业失败')
}
})
}).catch(() => {
// 取消操作
})
},
// ...
}
}
</script>
```
其中,`this.$confirm()`表示弹出确认提示框,`this.$axios.post()`表示发送数据到后端,`this.$message.success()`和`this.$message.error()`表示根据后端返回的状态给出不同的提示框。
综上,就完成了在D2admin框架中使用d2-crud-plus组件自定义按钮事件,并根据后端返回的状态给出不同的提示框的操作。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)