<template>
<div>
<!-- 创建一个组件:
需求：
1.点击出来一个弹窗，弹窗里包含tabel，从tabel通过selece选择出来选中的数据 return出去
2.传进来的数据：弹窗宽度，表格数据
3.传出去的数据：表格选择后的数据
4.差一个搜索功能
-->
<el-input v-model="inputVale" placeholder="请输入内容" @focus="openDialog"></el-input>
<el-dialog title="" :visible.sync="dialogTableVisible" :modal="false" :width='dialogWidth' top="35vh">
<el-form :model="from">
<el-row>
<el-col :span="8" v-for="(item, index) in searchCondition" :key="index">
<el-form-item :label="item.label">
<template slot-scope>
<el-input v-if="item.type === 'input'" v-model="from[`${item.prop}`]" size="mini"
clearable style="width:70%" :placeholder="item.placeholder || ''" />
<el-select v-if="item.type === 'select'" v-model="from[`${item.prop}`]"
placeholder="请选择活动区域" size="mini" style="width:70%">
<el-option v-for="item2 in item.opention" :key="item2.id" :label="item2.label"
:value="item2.id"></el-option>
</el-select>
</template>
</el-form-item>
</el-col>
<el-col :span="8" v-if="searchCondition">
<el-button size="mini" type="primary" icon="el-icon-search" @click="searchBtn()">搜索</el-button>
<el-button size="mini" plain @click="resetSearch()"
class="el-icon-refresh"> 重置</el-button>
</el-col>
</el-row>
</el-form>
<el-table :data="dialogList" border height="500" @row-click="handleRowClick" style="margin-top: 20px;">
<el-table-column v-for="(item, index) in tableTitleList" :key="item.prop" :prop="item.prop"
:label="item.label" align="center"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Sdqkc",
props: {
// tabel数据
dialogList: {
type: Array,
required: true,
},
dialogWidth: {
type: String,
default: "500",
},
// table表格title数据
tableTitleList: {
type: Array,
required: true,
},
// 选择到输入框的项，
chooseString: {
type: String,
default: "",
},
// 搜索框label等数据
searchCondition: {
type: Array,
required: true,
}
},
data() {
return {
inputVale: '',
dialogTableVisible: false,
from: {}
};
},
created() { },
methods: {
// 打开组件弹窗
openDialog() {
this.dialogTableVisible = !this.dialogTableVisible
},
// 点击tabel事件
handleRowClick(row) {
this.inputVale = row[this.chooseString]
this.$emit('update-pzxh', row[this.chooseString]); // 触发事件并传递字符串
this.dialogTableVisible = !this.dialogTableVisible
},
// 搜索方法
searchBtn() {
this.$nextTick(() => {
this.$emit('searchBtn', this.from);
});
},
// 重置方法
resetSearch() {
this.from = {}
this.$nextTick(() => {
let from = {};
this.$emit('searchBtn', from);
});
}
}
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
}
</style>
父组件
<tableSelectInDialog @update-pzxh="handleUpdatePzxh" @searchBtn="dialogSearch" :dialogList="dialogList"
:dialogWidth="dialogWidth" :tableTitleList="tableTitleList" :chooseString="chooseString"
:searchCondition="searchCondition" />
data
// 弹窗组件数据
dialogList: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
//弹窗宽度
dialogWidth: '800px',
//
tableTitleList: [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' },
],
chooseString: 'date',
searchCondition: [
{
label: "日期：",
width: 200,
prop: "date",
type: "input",
},
{
label: "地址：",
width: 200,
prop: "address",
type: "select",
opention: [
{ label: '选项一', id: '001' },
{ label: '选项二', id: '002' },
]
},
],
两个方法
handleUpdatePzxh(value) {
this.form.pzxh = value; // 将子组件传递的字符串赋值给 form.pzxh
console.log('更新后的 form.pzxh:', this.form.pzxh);
},
//
dialogSearch(queryParams) {
// 更新数据
if (Object.keys(queryParams).length === 0) {
this.dialogList = [
{
date: '2016-05-02',
name: '王小',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小',
address: '上海市普陀区金沙江路 1516 弄'
}
]
} else {
this.dialogList = [
{
date: '2016-05-0244',
name: '王小2222',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-0444455',
name: '王小333333333',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01666777',
name: '王小44444',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03888999',
name: '王小555555',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
// getliddt(this.queryParams).then(response => {
// });
},