室内设计素材网站大全,宝安设计网站建设,策划书的推广与运营,旅游电子商务网站策划书其一#xff1a;创建组件并在当前控制器中引入组件
!-- 示例核心代码(1/3) --
!-- 详情组件在此处使用#xff0c;但显示与否的判断是写在组件内的 --
Detail /!-- 引入组件 --
import Detail from ./detail.vue其二#xff1a;注册按钮
…其一创建组件并在当前控制器中引入组件
!-- 示例核心代码(1/3) --
!-- 详情组件在此处使用但显示与否的判断是写在组件内的 --
Detail /!-- 引入组件 --
import Detail from ./detail.vue其二注册按钮
const optButtons: OptButton[] defaultOptButtons([edit, delete])
放在此处之后
/*** 示例核心代码(2/3)* 表格操作按钮组 optButtons 只是个普通的数组此处向其 push 一个 OptButton*/
optButtons.push({render: tipButton,// name 是任意的name: detail,// title 是语言翻译 keytitle: treetable.detailBtnTitle,text: ,type: warning,icon: fa fa-search-plus icon,click(row, field) {console.info(%c-------详情按钮被点击了--------, color:blue)console.log(接受到行数据和列数据, row, field)console.log(%c赋值baTable.table.extend!.showInfo true, color:red)// 在 extend 上自定义一个变量标记详情弹窗显示状态详情组件内以此判断显示即可baTable.table.extend!.showInfo true// 您也可以使用 baTable.form.operate默认情况它有三个值Add、Edit、空字符串前两个值将显示添加和编辑弹窗// 您也可以再来个 loading 态然后请求详情数据等baTable.table.extend!.infoLoading truesetTimeout(() {baTable.table.extend!.infoData rowbaTable.table.extend!.infoLoading false}, 1000)},
}) 其三详情组件代码
!-- 示例核心代码(3/3) --
script setup langts
import { inject } from vue
import { timeFormat } from //utils/common
import type baTableClass from //utils/baTableconst baTable inject(baTable) as baTableClass
/scripttemplateel-dialog classba-operate-dialog v-modelbaTable.table.extend!.showInfo width50%template #headerdiv classtitle v-drag[.ba-operate-dialog, .el-dialog__header] v-zoom.ba-operate-dialog详情/div/templatediv v-loadingbaTable.table.extend!.infoLoading classinfo-box ba-markdowndiv v-ifbaTable.table.extend!.infoData
!-- divcodebaTable.table.extend!.showInfo true/code时本弹窗就显示了它是在按钮被点击时赋值的/div--div classmt-40id{{ baTable.table.extend!.infoData.id }}/divdiv父级ID{{ baTable.table.extend!.infoData.pid }}/divdiv上下级{{ baTable.table.extend!.infoData.name}}/divdiv创建时间{{ timeFormat(baTable.table.extend!.infoData.create_time) }}/div/div/div/el-dialog
/templatestyle scoped langscss
.info-box {margin-top: 60px;div {width: 100%;text-align: center;}.mt-40 {margin-top: 40px;}
}
/style
