先瞄一下, 是不是你要的效果
然后, 废话不多说, 直接上代码啦
- <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>
来源: http://www.bubuko.com/infodetail-3027639.html