Vue的avue模板框架，如何实现弹出窗口，可以在上面自定义设置文本框和文本按钮

[u011013470]

我最近在用Bladex和Archer、saber这个前后台模板框架在搭建一个项目，但是这个模板的前端使用的是avue-crud。

谁对avue-crud这个Vue框架比较熟悉，帮忙给我看看如何实现点击弹出一个窗口，并且可以在上面自定义设置文本框和文本按钮。

可以实现像是新增信息窗口的这种弹出窗口，但是这个弹出窗口的标题和里面的文本框和按钮可以自定义放置的组件。


<template>
<basic-container>
<avue-crud :option="option"
:table-loading="loading"
@refresh-change="refreshChange"
:data="data"
:page="page"
:permission="permissionList"
:before-open="beforeOpen"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@on-load="onLoad">
<template slot="menuLeft">
<el-button type="danger"
size="small"
icon="el-icon-search"
@row-save="rowSave"
application_business_trip>搜索
</el-button>
<el-button type="danger"
size="small"
icon="el-icon-delete"
plain
v-if="permission.applicationBusinessTrip_delete"
@click="handleDelete"
application_business_trip>删 除
</el-button>
</template>
</avue-crud>
</basic-container>
</template>


computed: {
...mapGetters(["permission"]),
permissionList() {
return {
searchBtn: this.vaildData(this.permission.applicationBusinessTrip_search, false),
addBtn: this.vaildData(this.permission.applicationBusinessTrip_add, false),
viewBtn: this.vaildData(this.permission.applicationBusinessTrip_view, false),
delBtn: this.vaildData(this.permission.applicationBusinessTrip_delete, false),
editBtn: this.vaildData(this.permission.applicationBusinessTrip_edit, false)
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
rowSearch(row, loading, done) {
const vo = {
plan: row,
model: this.modelData
};
search(vo).then(() => {
loading();
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
}, error => {
done();
console.log(error);
});
},
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
}





这个是这个项目的前端访问地址https://saber.bladex.vip/#/login

我找到了一个自定义的弹出框窗口的例子





但是，这个弹出窗口需要通过表格的ID难道一列当中的两个字段


这个是上面功能的源代码












我想实现一个不勾选表格一列最前面的复选框，点击这个搜索按钮，就弹出一个带着几个文本框和提交按钮的爽口，如何实现啊？？？



哪位前端大牛用过这个Vue组件，给看看，小弟在这里感激不尽。

[奇怪的牛马]

@qq_24514625 我们这后端弄得Avue我刚来没接触过Avue 我这有个就是点击查看出来弹窗 但是弹窗里的表格显示不对 怎么解决啊? 里面的文字都错行了 表格里的 表格里的小格子宽度设置? 怎么设置啊?问题是 而且那个页面的button根本就没有查看两个按钮 我那就设置了三个按钮 点开就出来了5个按钮

[weixin_52052981]

@qq_24514625 这个插槽好像只能对列起作用，会导致整个插入的内容只占据左半边区域，右半边是空的

[qq_24514625]

几句话几个错字，读了半天没弄懂你要问啥，如果需求是，添加一个按钮弹出一个表单，加个卡槽很简单，表单可自定义，后端开发路过

[qq_45268551]

博主问题解决了嘛，我也遇到这个问题了

[缘来是你、]

@我是大灰狼啊 https://github.com/lpx7788

[我是大灰狼啊]

老哥，您这个项目能给个github地址么，小弟down下来借鉴借鉴，我刚接触这东西，不太会用，我们需要的好多组件您这都有