多选
![](https://i-blog.csdnimg.cn/blog_migrate/10c9ad0b6f564a8da4dcb3ef04fe851c.png)
单选
![](https://i-blog.csdnimg.cn/blog_migrate/7e9d651e26ca24817f1712e9c21fd725.png)
完整范例代码
<style lang="scss">
.current table thead {
.el-table__cell:first-child .cell {
.el-checkbox {
display: none;
}
}
}
</style>
<template>
<el-dialog
:visible.sync="open"
title="选择"
width="60%"
>
<div class="comment-container gy-table-sort">
<div class="search-div">
<el-form inline>
<el-form-item>
<el-input
v-model.trim="schData.filter_fieldFour"
placeholder="请输入编号"
clearable
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" @click="refreshTab">重置</el-button>
<el-button icon="el-icon-search" type="primary" @click="searchTab">搜索
</el-button>
</el-form-item>
</el-form>
</div>
<div class="comment-table mt30">
<el-table
:class="{'current': radioType}"
ref="multipleTable"
v-loading="loading"
border
:data="tableData"
@select="selectChange"
@select-all="selectAllChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="id" label="编号" />
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
{{ scope.row.name || '--' }}
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="total > 0"
background
layout="prev, pager, next, sizes"
:page-sizes="pageSizes"
:page-size.sync="pageSize"
:current-page.sync="pageIndex"
:total="total"
class="pagination"
@size-change="loadData"
@current-change="loadData"
/>
<el-button style="display:block;margin: 20px auto 0" :disabled="submitDisable" type="primary" @click="submit">确认</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { RoomGetListByGroup } from '@/api/userRoom'
export default {
export default {
name: 'HouseDialog',
props: {
showDialog: {
type: Boolean,
default: false
},
radioType: { // 是否单选
type: Boolean,
default: false
},
houseData: {
type: Array,
default: () => []
}
},
data() {
return {
schData: {},
total: 0,
pageIndex: 1,
pageSize: 5,
pageSizes: [5, 10, 15],
tableData: [],
loading: true,
selectedList: [],
submitDisable: false
}
},
computed: {
open: {
get() {
return this.showDialog
},
set(val) {
this.$emit('update:showDialog', val)
}
}
},
watch: {
open(val) {
this.ruleForm = {}
if (val) {
this.ruleForm = this.formData
this.selectedList = this.houseData
this.pageIndex = 1
this.pageSize = 5
this.loadData()
}
},
},
methods: {
searchTab() {
this.pageIndex = 1
this.loadData()
},
refreshTab() {
this.schData = {}
this.pageIndex = 1
this.pageSize = 10
this.loadData()
},
// 列表
loadData() {
this.loading = true
const { pageIndex, pageSize, proNodeId } = this
RoomGetListByGroup({
pageSize,
pageIndex,
filter_fieldone: proNodeId,
filter_fieldThirteen: '0,3,4',
...this.schData
})
.then((res) => {
this.loading = false
if (res.success) {
this.total = res.response.dataCount
this.tableData = res.response.data
this.updateMark()
this.loading = false
}
})
.catch((err) => {
this.loading = false
this.$message.error(err.msg || err.message || '获取列表失败!')
})
},
// 单行前的勾选状态切换
selectChange(selectedRows, row) {
// true为选中, 0或false为取消选中
const selected = selectedRows.length && selectedRows.indexOf(row) !== -1
if (selected) {
this.addItem(row)
} else {
this.removeItem(row)
}
},
// 全选/取消全选
selectAllChange(selectedRows) {
const selectedMarkList = this.selectedList.map((item) => item.id)
// 当前页选中行的标记列表
const pageSelectedMarkList = Array.isArray(selectedRows)
? selectedRows.map((item) => item.id)
: []
this.tableData.forEach((row) => {
if (pageSelectedMarkList.includes(row.id)) {
if (!selectedMarkList.includes(row.id)) {
this.addItem(row)
}
} else if (selectedMarkList.includes(row.id)) {
this.removeItem(row)
}
})
},
// 更新勾选标记
updateMark() {
const selectedMarkList = this.selectedList.map((item) => item.id)
this.tableData.forEach((row) => {
if (selectedMarkList.includes(row.id)) {
// toggleRowSelection 需在$nextTick中使用!
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(row)
})
}
})
},
// 新增选中项
addItem(item) {
if (this.radioType) {
this.selectedList = [{
id: item.id,
roomNumber: item.roomNumber,
ownersNames: item.ownersNames,
status: item.status
}]
this.$refs.multipleTable.clearSelection()
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(item)
})
} else {
this.selectedList.push(item)
}
},
// 移除选中项
removeItem(item) {
for (const [index, itemTemp] of this.selectedList.entries()) {
if (itemTemp.id === item.id) {
this.removeItemByIndex(index)
break
}
}
},
// 根据下标移除选中项
removeItemByIndex(index, item) {
this.selectedList.splice(index, 1)
// 若有item,则是点击标签上的关闭按钮,移除选中项
if (item) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(
// 此处必须在 tableData 中查找对应的数据,否则 toggleRowSelection 会失效
this.tableData.find((row) => {
return row.id === item.id
}),
false
)
})
}
},
submit() {
if (this.selectedList.length === 0) return this.$message.error('请选择')
this.$emit('submit', this.selectedList)
}
}
}
<!-- 选择房屋 -->
<house-dialog
:show-dialog.sync="showHouseDialog"
:house-data="ruleForm.roomids"
@submit="submitDialog"
/>