index.vue 2.79 KB
<template>
  <div class="addCh">
      <el-table
			class="addChTable"
			:data="tableData"
			style="width: 100%"
			border
		>
			<el-table-column prop="cz" width="40"  align="center">
                <template slot-scope="scope">
                    <span class="cp" @click="handleRowClick(scope.row,scope.$index)">{{scope.row.cz}}</span>
                </template>
			</el-table-column>
			<el-table-column prop="ljzbsm" label="逻辑幢" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.ljzbsm"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="zdybsm" label="幢单元" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.zdybsm"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="qsc" label="起始层" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.qsc"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="jsc" label="结束层" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.jsc"></el-input>
				</template>
			</el-table-column> 
			<el-table-column prop="mchs" label="每层户数" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.mchs"></el-input>
				</template>
			</el-table-column>
		</el-table>
  </div>
</template>

<script>
export default {
  name:"",
  components:{},
  props:{},
  data(){
    return {
        tableData:[

        ],
        formData:{
            cz:'+',
            ljzbsm:'',
            zdybsm:'',
            qsc:'',
            jsc:'',
            mchs:'',
        }
    }
  },
  created(){
      this.tableData.push(this.formData)
  },
  mounted(){},
  methods:{
      //行操作
      handleRowClick(row,index){
          console.log(index);
          if(row.cz =='+'){
              let temp = JSON.parse(JSON.stringify(this.formData));
              temp.cz = '-';
              this.tableData.push(temp);
          }else{
              this.tableData.splice(index, 1)
          }
      },
      //重置数据
      reset(){
          this.tableData = [
              {
                cz:'+',
                ljzbsm:'',
                zdybsm:'',
                qsc:'',
                jsc:'',
                mchs:'',
            }
          ]
      }
  },
  computed: {},
  watch: {},
}
</script>
<style lang="less">
.addCh{
    .addChTable {
        .el-input__inner {
            height: 20px;
            margin: 0;
            line-height: 20px;
            outline: none;
            border: none;
            color: #606764;
            overflow: visible;
            cursor: text;
            text-align: center;
        }
    }
    .cp{
        cursor: pointer;
    }
}

</style>