Element-ui表格選中回顯

先瞄一下，是否是你要的效果

而後，廢話很少說，直接上代碼啦

 

  1 <template>
  2   <div class>
  3     <div class="projectData">
  4       <el-table :data="tableData2" ref="multipleTable" :show-header="false" :border="false" style="width: 100%" @selection-change="handleSelectionChange">
  5         <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
  6         <el-table-column prop="spaceName" width="180"></el-table-column>
  7         <el-table-column>
  8           <template slot-scope="scope" v-if="scope.row.id==1||scope.row.id==3||scope.row.id==4">
  9             <el-input
 10               v-model="scope.row.spacePrice"
 11               class="el-input_inner"
 12               size="medium"
 13               clearable
 14             ></el-input>
 15             {{scope.row.spaceUnit}}
 16           </template>
 17         </el-table-column>
 18       </el-table>
 19     </div>
 20     <el-button type="primary" @click="submitForm">肯定</el-button>
 21   </div>
 22 </template>
 23 
 24 <script>
 25 export default {
 26   data() {
 27     return {
 28       tableData2: [],
 29       multipleSelection: [],
 30       listData:[],
 31     };
 32   },
 33   methods: {
 34     handleSelectionChange(val) {
 35       this.multipleSelection = val;
 36       for (var i = 0; i < this.multipleSelection.length; i++) {
 37           this.multipleSelection[i].containSpace = 1;
 38         }
 39     },
 40     // 初始化數據
 41      projectManage(){
 42           this.$axios.get("/clapi/materiel/mealSpaceRela/queryProjectManage?mealId="+this.message.id)
 43           .then((response) => {
 44               if(response.data.status.code == 200){
 45               this.tableData2 = response.data.result;
 46               this.listData = response.data.result
 47               for ( let i = 0 ; i < this.listData.length ; i++ ){
 48                   if(this.listData[i].containSpace == 1){
 49                     //這是默認選中上的
 50                     this.$refs.multipleTable.toggleRowSelection(this.tableData2[i],true);
 51                   }
 52                 } 
 53           }
 54       })
 55       .catch(error => {
 56         console.log(error);
 57       });
 58     },
 59     // 保存
 60     submitForm() {
 61       // 數組爲空的話，狀態爲0，輸入框爲0
 62       if(this.multipleSelection.length == 0){
 63             for (var i = 0; i < this.tableData2.length; i++) {
 64             this.tableData2[i].containSpace = 0;
 65             this.tableData2[i].spacePrice = 0;
 66            }
 67            this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.tableData2)
 68           .then((response) => {
 69             this.$message({
 70               type: "success",
 71               message: "保存成功!"
 72             });
 73           })
 74           .catch((error) =>{
 75             console.log(error);
 76           });
 77         }else{
 78           //已選數據，其餘輸入的值爲0
 79           for(var n=0;n<this.multipleSelection.length;n++){
 80             // 若是選中的數據爲空默認爲0
 81            if(this.multipleSelection[n].spacePrice=='')this.multipleSelection[n].spacePrice=0;
 82           }
 83          this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.multipleSelection)
 84           .then((response) => {
 85            this.$message({
 86               type: "success",
 87               message: "保存成功!"
 88             });
 89           })
 90           .catch((error) =>{
 91             console.log(error);
 92           });
 93         }
 94 
 95     },
 96   },
 97   created() {
 98     this.projectManage();
 99 
100   }
101 };
102 </script>
103 
104 <style scoped>
105 .projectData >>> .el-input__inner {
106   text-align: center;
107 }
108 
109 .projectData >>> .el-table--enable-row-hover .el-table__body tr:hover > td {
110   background: #fff!important;
111 }
112 
113 .projectData tr {
114   height: 60px !important;
115 }
116 .projectData {
117   margin-left: 80px;
118 }
119 .favour_checkbox {
120   height: 60px;
121   display: block;
122 }
123 
124 table,table th,table tr td {
125   border:1px solid red;
126 }
127 
128 .el-input_inner,
129 .el-select {
130   text-align: center;
131   width: 100px;
132 }
133 
134 </style>

 如有不明白請加羣號：複製 695182980 ，也可掃碼，但願能幫助到你們。