添加父子表格联动页面
夜笙歌
1 week ago
parent
ffef49a080
commit
9c7a2ac1fb
@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-card shadow="never">
|
||||
<el-form label-width="120px" label-position="right" :inline="true" :model="queryForm" class="demo-form-inline">
|
||||
<el-form-item label="字段1">
|
||||
<el-input v-model="queryForm.user" placeholder="字段1" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字段2">
|
||||
<el-select
|
||||
v-model="queryForm.region"
|
||||
placeholder="字段2"
|
||||
clearable
|
||||
>
|
||||
<el-option label="选项1" value="shanghai"/>
|
||||
<el-option label="选项2" value="beijing"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="字段3">
|
||||
<el-date-picker
|
||||
v-model="queryForm.date"
|
||||
type="date"
|
||||
placeholder="字段3"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="query">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin-top: 8px" shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="parentTableAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="ids.length !== 1" @click="parentTableUpdate()">修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="ids.length < 1" @click="parentTableDelete()">删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
|
||||
@queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table :data="tableData" style="width: 100%" @cell-click="parentTableCellClick"
|
||||
@selection-change="selectionChange" ref="parentTableRef">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="Date" prop="date"/>
|
||||
<el-table-column label="Date" prop="name"/>
|
||||
<el-table-column label="Operations" fixed="right" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click.stop="viewDetails(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button size="small" @click.stop="parentTableUpdate(scope.row)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click.stop="parentTableDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin-top: 8px" shadow="never">
|
||||
<el-table :data="tableData1" style="width: 100%">
|
||||
<el-table-column label="Date" prop="date"/>
|
||||
<el-table-column label="Date" prop="name"/>
|
||||
<el-table-column label="Operations" fixed="right" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="100%" fullscreen>
|
||||
<el-card shadow="never">
|
||||
<el-form :model="dialogForm" :inline="true">
|
||||
<el-form-item label="字段1" label-width="120px">
|
||||
<el-input v-model="dialogForm.name" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字段2" label-width="120px">
|
||||
<el-select v-model="dialogForm.region" placeholder="Please select a zone">
|
||||
<el-option label="Zone No.1" value="shanghai"/>
|
||||
<el-option label="Zone No.2" value="beijing"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card style="margin-top: 8px" shadow="never">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="addDialogTableCell">新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="dialogtable" style="width: 100%">
|
||||
<el-table-column label="字段1" prop="date">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.date"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
label="1"
|
||||
value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="2"
|
||||
value="2"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段2" prop="name">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" style="width: 240px" placeholder="Please input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Operations" fixed="right" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="dialogSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Linkage" lang="ts">
|
||||
|
||||
import {reactive} from 'vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
|
||||
interface User {
|
||||
date: string
|
||||
name: string
|
||||
address: string
|
||||
}
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('添加')
|
||||
const dialogForm = reactive({})
|
||||
|
||||
const queryForm = reactive({
|
||||
user: '',
|
||||
region: '',
|
||||
date: '',
|
||||
})
|
||||
const parentTableRef = ref()
|
||||
const tableData = ref([
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
])
|
||||
const ids = ref([])
|
||||
const tableData1 = ref([
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
])
|
||||
const dialogtable = ref([])
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
|
||||
const handleEdit = (index: number, row: User) => {
|
||||
console.log(index, row)
|
||||
}
|
||||
const handleDelete = (index: number, row: User) => {
|
||||
console.log(index, row)
|
||||
}
|
||||
const query = () => {
|
||||
console.log(queryForm)
|
||||
ids.value = []
|
||||
parentTableRef.value.clearSelection()
|
||||
}
|
||||
|
||||
// 父表格行点击
|
||||
const parentTableCellClick = (e) => {
|
||||
console.log(e.date)
|
||||
tableData1.value = tableData1.value.map(v => {
|
||||
return {
|
||||
...v,
|
||||
date: e.date
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格多选
|
||||
const selectionChange = (e) => {
|
||||
ids.value = e.map(v => v.name)
|
||||
console.log(ids.value)
|
||||
}
|
||||
// 查看
|
||||
const viewDetails = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
// 父表格新增
|
||||
const parentTableAdd = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 父表格修改
|
||||
const parentTableUpdate = (e) => {
|
||||
let id = ref(null)
|
||||
if (e) {
|
||||
id.value = e.name
|
||||
} else {
|
||||
id.value = ids.value?.[0]
|
||||
}
|
||||
if (!id.value) return
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 父表格删除
|
||||
const parentTableDelete = (e) => {
|
||||
const delList = ref([])
|
||||
if (e) {
|
||||
delList.value = [e.name]
|
||||
} else {
|
||||
delList.value = ids.value
|
||||
}
|
||||
console.log(delList.value)
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除这些数据吗?',
|
||||
'Warning',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除完成',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消',
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 添加子表格行
|
||||
const addDialogTableCell = () => {
|
||||
dialogtable.value.push({})
|
||||
}
|
||||
|
||||
// dialog提交
|
||||
const dialogSubmit = () => {
|
||||
console.log(dialogForm)
|
||||
console.log(dialogtable.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-form-inline .el-input {
|
||||
--el-input-width: 220px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 220px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue