添加父子表格联动页面
夜笙歌
3 weeks 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