表格代码
<el-table ref="contractTable" v-loading="loading" :data="contractList" @selection-change="contractSelectionChange" style="margin-top: 10%;"><el-table-column type="selection" width="55" align="center" /><el-table-column label="id" prop="id" width="180%" v-if="false"/><el-table-column label="合同编号" prop="contractNo" width="180%" /><el-table-column label="合同名称" prop="contractName" :show-overflow-tooltip="true" width="180%" /><el-table-column label="合同金额" prop="contractAmount" :show-overflow-tooltip="true" width="100%" /><!-- <el-table-column label="显示顺序" prop="roleSort" width="100" /> --></el-table>
单选事件
contractSelectionChange(selection) {const val = selection;this.contarctSelect = val.map(item => item.id);//单选,contractList是表格数据,contractTable是el-table的refthis.contractList.forEach(item => {if (val[val.length - 1] === item) {this.$refs.contractTable.toggleRowSelection(item, true)} else {this.$refs.contractTable.toggleRowSelection(item, false)}});},
默认选中事件
//创建一个空数组用来存放默认数据let list = [];//response.data[8][0]请求返回的一条数据,将id保存起来(这步可有可无)this.contarctDefSelectId = response.data[8][0].id;//遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致//contractList是表格数据this.contractList.forEach((item) => {if (response.data[8][0].contractId == item.id) {// 把判断出来的默认表格数据push到创建的数组中list.push(item);}});//contractTable是表格refthis.$nextTick(()=>{if(list.length>0){list.forEach((row) => {this.$refs.contractTable.toggleRowSelection(row, true);})}})
效果: