.current table thead{
.el-table__cell:first-child .cell{
.el-checkbox{
display: none;
}
}
}
.gy-table-sort{
.el-table--border .el-table__cell:first-child .cell{
text-align: center;
display: block;
margin: 0 auto;
padding: 0;
}
.el-table th:first-child:not(.el-table-column--selection),
.el-table td:first-child:not(.el-table-column--selection),{
padding-left: 0!important;
}
}
<el-table
ref="multipleTable"
v-loading="loading"
border
:data="tableData"
:row-style="rowClass"
tooltip-effect="dark"
:row-key="getRowKeys"
highlight-currrent-row
@selection-change="handleSelectionChange"
@current-change="rowChange"
:class="{'current': !tabIndex}"
>
<el-table-column v-if="tabIndex" align="center" width="55" label="单选">
<template slot-scope="scope">
<el-radio class="radio" @change="rowChange(scope.row)" v-model="currentRow" :label="scope.row.id"> </el-radio>
</template>
</el-table-column>
<el-table-column v-if="!tabIndex" type="selection" width="55" :reserve-selection="true"/>
<el-table-column prop="id" label="房屋编号"/>
<el-table-column prop="name" label="客户名称"/>
<el-table-column prop="floorArea" label="建筑面积(M2)" width="110" align="center"/>
<el-table-column prop="costArea" label="计费面积(M2)" width="110" align="center"/>
<el-table-column prop="insideArea" label="套内面积(M2)" width="110" align="center"/>
<el-table-column prop="sharedArea" label="公摊面积(M2)" width="110" align="center"/>
</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"
/>
</div>
tabIndex: 0,
schData: {},
total: 0,
pageIndex: 1,
pageSize: 5,
pageSizes: [5, 10, 15],
tableData: [],
loading: true,
currentRow: null,
selectRow: [], // 选中行
selectData: [] // 选中数据
watch: {
selectData(data) {
this.selectRow = []
if (data.length > 0) {
data.forEach((item) => {
this.selectRow.push(this.tableData.indexOf(item))
})
}
}
},
methods: {
rowClass({ rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { background: '#ecf5ff' }
}
},
getRowKeys(row) {
return row.id
},
rowChange(row) {
this.currentRow = row.id
this.selectData = this.tableData.filter((item) => item.id === row.id)
console.log(this.currentRow, this.selectData)
},
searchTab() {
this.pageIndex = 1
this.loadData()
},
// 列表
loadData() {
this.loading = true
const { pageIndex, pageSize, proNodeId, userId } = this
//接口方法里判断
this.loading = false
if (res.success) {
this.total = res.response.dataCount
// this.tableData = res.response.data
this.tableData = [
{
id: '01-0102(101)',
name: '张皓',
floorArea: 100.1,
costArea: 100,
insideArea: 89.1,
sharedArea: 30,
state: 1
},
{
id: '01-0102(102)',
name: '马天龙',
floorArea: 100.1,
costArea: 100,
insideArea: 89.1,
sharedArea: 30,
state: 1
}
]
}
},
// 单选
handleCurrentChange(val) {
console.log('单选', val)
this.currentRow = val
},
handleSelectionChange(data) {
console.log('多选', data)
this.selectData = data
},
或者多选改单选
<el-table-column type="selection" width="55" :reserve-selection="true"/>
handleSelectionChange(data) {
if (!this.tabIndex) { // 单选
if (data.length > 1) {
this.$refs.multipleTable.clearSelection()
this.$refs.multipleTable.toggleRowSelection(data.pop())
} else {
this.selectData = data
}
} else { // 多选
this.selectData = data
}
},