表格代码
- <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的ref
- this.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是表格ref
- this.$nextTick(()=>{
- if(list.length>0){
- list.forEach((row) => {
- this.$refs.contractTable.toggleRowSelection(row, true);
- })
- }
- })
效果:
