如何在A表格的右侧添加自定义按钮,点击按钮弹带当前行的参数弹出B表格窗口,对B表格的数据进行筛选
A表格代码
<template>
<div class="default-main ba-table-box">
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
<!-- 表格顶部菜单 -->
<!-- 自定义按钮请使用插槽,甚至公共搜索也可以使用具名插槽渲染,参见文档 -->
<TableHeader
:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('Quick search placeholder', { fields: t('exam.exam.quick Search Fields') })"
></TableHeader>
<!-- 表格 -->
<!-- 表格列有多种自定义渲染方式,比如自定义组件、具名插槽等,参见文档 -->
<!-- 要使用 el-table 组件原有的属性,直接加在 Table 标签上即可 -->
<Table ref="tableRef"></Table>
<!-- 表单 -->
<PopupForm />
<Certificate />
</div>
</template>
cleanXss
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import Certificate from '../certificate/index.vue'
defineOptions({
name: 'exam/exam',
})
const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
/**
* 示例核心代码(2/3)
* 表格操作按钮组 optButtons 只是个普通的数组,此处向其 push 一个 OptButton
*/
optButtons.push({
render: 'tipButton',
// name 是任意的
name: 'exam_conf',
// title 是语言翻译 key
title: '证书配置',
text: '',
type: 'warning',
icon: 'el-icon-Setting',
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 = true
setTimeout(() => {
baTable.table.extend!.infoData = row
baTable.table.extend!.infoLoading = false
}, 1000)
},
})
/**
* baTable 内包含了表格的所有数据且数据具备响应性,然后通过 provide 注入给了后代组件
*/
const baTable = new baTableClass(
new baTableApi('/admin/exam.Exam/'),
{
pk: 'id',
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('exam.exam.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('exam.exam.name'), prop: 'name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
{ label: t('exam.exam.is_course'), prop: 'is_course', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: { '0': t('exam.exam.is_course 0'), '1': t('exam.exam.is_course 1') } },
{ label: t('exam.exam.educourse__name'), prop: 'eduCourse.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
{ label: t('exam.exam.num'), prop: 'num', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('exam.exam.fraction'), prop: 'fraction', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('exam.exam.pass_line'), prop: 'pass_line', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('exam.exam.selection_mode'), prop: 'selection_mode', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: { '0': t('exam.exam.selection_mode 0'), '1': t('exam.exam.selection_mode 1') } },
{ label: t('exam.exam.time_limited'), prop: 'time_limited', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('exam.exam.start_time'), prop: 'start_time', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },
{ label: t('exam.exam.end_time'), prop: 'end_time', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },
{ label: t('exam.exam.switch'), prop: 'switch', align: 'center', render: 'switch', operator: 'eq', sortable: false, replaceValue: { '0': t('exam.exam.switch 0'), '1': t('exam.exam.switch 1') } },
{ label: t('exam.exam.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('exam.exam.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('Operate'), fixed: 'right', align: 'center', width: 150, render: 'buttons', buttons: optButtons, operator: false },
],
dblClickNotEditColumn: [undefined, 'switch'],
},
{
defaultItems: {
is_course: '0',
selection_mode: '0',
switch: '1',
configure: [],
},
}
)
provide('baTable', baTable)
onMounted(() => {
baTable.table.ref = tableRef.value
baTable.mount()
baTable.getIndex()?.then(() => {
baTable.initSort()
baTable.dragSort()
})
})
cleanXss
<style scoped lang="scss"></style>
B表格代码
<template>
<el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showInfo" width="50%">
<div class="default-main ba-table-box">
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
<!-- 表格顶部菜单 -->
<!-- 自定义按钮请使用插槽,甚至公共搜索也可以使用具名插槽渲染,参见文档 -->
<TableHeader
:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('Quick search placeholder', { fields: t('exam.certificate.quick Search Fields') })"
></TableHeader>
<!-- 表格 -->
<!-- 表格列有多种自定义渲染方式,比如自定义组件、具名插槽等,参见文档 -->
<!-- 要使用 el-table 组件原有的属性,直接加在 Table 标签上即可 -->
<Table ref="tableRef"></Table>
<!-- 表单 -->
<PopupForm />
</div>
</el-dialog>
</template>
cleanXss
import {inject, onMounted, provide, ref} from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
defineOptions({
name: 'exam/certificate',
})
const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['weigh-sort', 'edit', 'delete'])
/**
* baTable 内包含了表格的所有数据且数据具备响应性,然后通过 provide 注入给了后代组件
*/
const baTable = new baTableClass(
new baTableApi('/admin/exam.Certificate/'),
{
pk: 'id',
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('exam.certificate.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('exam.certificate.examexam__name'), prop: 'examExam.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
{ label: t('exam.certificate.unit'), prop: 'unit', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
{ label: t('exam.certificate.year'), prop: 'year', align: 'center', operator: 'RANGE', sortable: 'custom' },
{ label: t('exam.certificate.image'), prop: 'image', align: 'center', render: 'image', operator: false },
{ label: t('exam.certificate.seal'), prop: 'seal', align: 'center', render: 'image', operator: false },
{ label: t('exam.certificate.weigh'), prop: 'weigh', align: 'center', operator: 'RANGE', sortable: 'custom' },
{ label: t('exam.certificate.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('exam.certificate.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('Operate'), align: 'center', width: 140, render: 'buttons', buttons: optButtons, operator: false },
],
dblClickNotEditColumn: [undefined],
defaultOrder: { prop: 'weigh', order: 'desc' },
},
{
defaultItems: {},
}
)
provide('baTable', baTable)
onMounted(() => {
baTable.table.ref = tableRef.value
baTable.mount()
baTable.getIndex()?.then(() => {
baTable.initSort()
baTable.dragSort()
})
})
cleanXss
<style scoped lang="scss"></style>
都是通过curd自动生成的页面,B表格加入了el-dialog,不弹框出来,可能是和baTable.table.extend!.showInfo 其中的baTable和B页面的相冲了,该怎么进行修改呀?非前端开发,跪求大佬指点,Thanks♪(・ω・)ノ
请先登录
选择附件就是在一个表格中弹出另外一个表格,唯一需要注意的是
new baTable()
需要放在单独的vue
文件中,然后在它处导入使用实现了吗?
A页面创建一个按钮,可参考开发示例中的详情按钮和弹窗,
这是B页面的代码,应该还有更简单的,我是这样实现的
- 1
前往