<el-table
:data="tableData"
ref="tableData"
height="450px"
class="customer-no-border-table"
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
style="width: 100%; border-top: 1px solid #409eff"
border
>
<el-table-column
width="55"
align="center"
:render-header="renderHeader"
><template v-slot="{ row }">
<el-checkbox
v-model="row.checked"
@change="handleCheckboxChange(row, $event)"
>
</el-checkbox>
</template>
</el-table-column>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
></el-table-column>
<div slot="empty">
<img
src="@/assets/nodata.png"
style="width: 270px; height: 190px; margin-top: 80px"
alt="暂无数据"
/>
<div
style="
font-size: 16px;
color: #666666;
margin-bottom: 80px;
width: 270px;
"
>
暂无数据
</div>
</div>
<el-table-column
v-for="(item, index) in columns"
:width="item.width"
:key="index"
:prop="item.prop"
:label="item.label"
:formatter="item.formatter"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
</el-table>
allSelected: false, // 是否全选
indeterminate: false, // 是否为半选状态
watch: {
selectStation: function (newVal, oldVal) {
if (
newVal.length === this.tableData.length &&
this.tableData.length > 0
) {
this.allSelected = true;
this.indeterminate = false;
} else if (newVal.length === 0) {
this.allSelected = false;
this.indeterminate = false;
} else {
this.allSelected = false;
this.indeterminate = true;
}
},
},
handleCheckboxChange(row, checked) {
if (this.rightbox && this.name !== "停车场设置") {
} else {
this.updateSelectStation(row, checked);
}
},
updateSelectStation(row, checked) {
this.tableData.forEach((i) => {
if (i.buildId == row.buildId) {
row.checked = checked;
}
});
if (checked) {
const index = this.selectStation.indexOf(row);
if (index == -1) {
this.selectStation.push(row);
}
} else {
const index = this.selectStation.indexOf(row);
console.log("
标签:selectStation,selection,checked,自定义,index,allSelected,移除,false,row
From: https://www.cnblogs.com/hxy--Tina/p/18318450