Element-ui表格選中回顯

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

然后，廢話不多說，直接上代碼啦

 

<template>
  <div class>
    <div class="projectData">
      <el-table :data="tableData2" ref="multipleTable" :show-header="false" :border="false" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column prop="spaceName" width="180"></el-table-column>
        <el-table-column>
          <template slot-scope="scope" v-if="scope.row.id==1||scope.row.id==3||scope.row.id==4">
            <el-input
              v-model="scope.row.spacePrice"
              class="el-input_inner"
              size="medium"
              clearable
            ></el-input>
            {{scope.row.spaceUnit}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="primary" @click="submitForm">確定</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData2: [],
      multipleSelection: [],
      listData:[],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (var i = 0; i < this.multipleSelection.length; i++) {
          this.multipleSelection[i].containSpace = 1;
        }
    },
    // 初始化數據
     projectManage(){
          this.$axios.get("/clapi/materiel/mealSpaceRela/queryProjectManage?mealId="+this.message.id)
          .then((response) => {
              if(response.data.status.code == 200){
              this.tableData2 = response.data.result;
              this.listData = response.data.result
              for ( let i = 0 ; i < this.listData.length ; i++ ){
                  if(this.listData[i].containSpace == 1){
                    //這是默認選中上的
                    this.$refs.multipleTable.toggleRowSelection(this.tableData2[i],true);
                  }
                } 
          }
      })
      .catch(error => {
        console.log(error);
      });
    },
    // 保存
    submitForm() {
      // 數組為空的話，狀態為0，輸入框為0
      if(this.multipleSelection.length == 0){
            for (var i = 0; i < this.tableData2.length; i++) {
            this.tableData2[i].containSpace = 0;
            this.tableData2[i].spacePrice = 0;
           }
           this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.tableData2)
          .then((response) => {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
          })
          .catch((error) =>{
            console.log(error);
          });
        }else{
          //已選數據，其他輸入的值為0
          for(var n=0;n<this.multipleSelection.length;n++){
            // 如果選中的數據為空默認為0
           if(this.multipleSelection[n].spacePrice=='')this.multipleSelection[n].spacePrice=0;
          }
         this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.multipleSelection)
          .then((response) => {
           this.$message({
              type: "success",
              message: "保存成功!"
            });
          })
          .catch((error) =>{
            console.log(error);
          });
        }

    },
  },
  created() {
    this.projectManage();

  }
};
</script>

<style scoped>
.projectData >>> .el-input__inner {
  text-align: center;
}

.projectData >>> .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #fff!important;
}

.projectData tr {
  height: 60px !important;
}
.projectData {
  margin-left: 80px;
}
.favour_checkbox {
  height: 60px;
  display: block;
}

table,table th,table tr td {
  border:1px solid red;
}

.el-input_inner,
.el-select {
  text-align: center;
  width: 100px;
}

</style>

 若有不明白請加群號：復制 695182980 ，也可掃碼，希望能幫助到大家。