<el-dialog title="新增" :visible.sync="addDialogVisible" width="60%" top="10vh">
<el-table
border
stripe
class="mb20"
ref="multipleTable"
:data="tableData"
v-loading="tableLoading"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column label="选择" width="60">
<template slot-scope="scope">
<el-checkbox
@change="handleCheck(scope.row)"
v-model="scope.row.check"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="community" label="小区名称" width="150"></el-table-column>
<el-table-column prop="num" label="楼栋房号" width="150">
<template slot-scope="scope">
{{scope.row.unit}} {{scope.row.houseNumber}}
</template>
</el-table-column>
<el-table-column prop="path" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="addCancel()" size="mini">取 消</el-button>
<el-button type="primary" @click="addConfirm" size="mini" :loading="btnLoading">确 定</el-button>
</div>
</el-dialog>
效果:只能单选 点击确定请求接口
methods: {
getTableData() {
this.tableLoading = true
searchHouse(this.tableSearch).then(res => {
let data = res.data.records || []
// 为data加一个check属性来控制单选框
data.forEach(o => {
o.check = false;
})
this.tableData = data
// console.log(this.tableData);
this.tableTotal = Number(res.data.total)
this.tableLoading = false
}).catch(err => {
this.tableLoading = false
})
},
addConfirm() {
let table = this.tableData.filter(item => item.check)
if (!table.length) {
this.$message.warning('请选择房屋')
return
}
this.$refs['addFormRef'].validate((res) => {
if(res) {
let data = {
bizopId: this.row.id,
blockHouseNumber: table[0].block + table[0].unit + table[0].houseNumber,
communityAddress: table[0].region + table[0].street + table[0].community,
communityName: table[0].community,
appointDate: this.addForm.date,
signedHouseId: table[0].id,
}
this.btnLoading = true
addLivingRec(data).then(res => {
this.btnLoading = false
this.addDialogVisible = false;
this.$refs.addFormRef.resetFields();
this.getlist()
}).catch(e => {
this.btnLoading = false
})
}
})
},
handleCheck(row) {
this.tableData.forEach(item => {
// 如果选中的id不对其进行操作 其他未选中的check属性设置为false
item.id == row.id ? '' : item.check = false
})
}