实现后的效果:
需求
表格展示数据,选中的数据展示在表格下方,点击删除图标删除选中的数据,需要同步到table中更新选中状态
index.vue
<template>
<div>
<el-button @click="handleClick()" > 按钮</el-button>
<table-dialog ref="tableDialog " :wildAxios="wildAxios" @callback="handleCallback">
</table-dialog>
</div>
</template>
<script>
import {
Button } from 'element-ui'
import TableDialog from './table-dialog'
export default {
components: {
[Button.name]: Button,
TableDialog
},
data(){
return{
}
},
methods:{
showBox() {
let showData = [
{
id:1, name:"name1" },
{
id:2, name:"name2" },
]
this.$refs.tableDialog .show(showData)
},
handleCallback(selectData){
console.log(selectData)
}
}
}
</script>
table-dialog.vue
<template>
<el-dialog
top="2vh"
width="800px"
:show-close="false"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
class="page-dialog"
>
<div class="dialog-header">
<div class="title">这里是弹框标题</div>
<div class="header-btns">
<el-button size="mini" @click="handleClose">取 消</el-button>
<el-button size="mini" type="primary" @click="handleSubmit">确 定</el-button>
</div>