element表格点击出现输入框

33455432
于 2023-10-23 14:47:33 发布
阅读量231
点赞数
文章标签： javascript 前端开发语言
本文链接：https://blog.csdn.net/weixin_38999134/article/details/133990082
版权
<template>
    <div class="app-container">
      <div class="content_wrap">
        <div class="mt-10">
          <span class="table_title">数据查询列表</span>
        </div>
        <el-date-picker
            v-model="timeval"
            class="mt-20"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dataChange"
            >
        </el-date-picker>
        <el-button type="primary" class="ml-10" @click="searchbtn()">查询</el-button>

        <el-table
            @cell-click="cellClick"
            :row-class-name="tableRowClassName"
            :cell-class-name="tableCellClassName"
            class="mt-15"
            v-loading="listLoading"
            stripe 
            :data="dataList"
            style="width: 100%">
              <el-table-column
              prop="date"
              label="时间"
              align="center"
              >
                  <template slot-scope="scope">
                    <span>{{ scope.row.date }}</span>
                  </template>
              </el-table-column>
              <el-table-column
              prop="shiftName"
              label="班组"
              align="center"
              >
              </el-table-column>
              <el-table-column
              prop="scrapRate"
              label="报废率"
              align="center"
              >
                  <template slot-scope="scope">
                    <div v-if="scope.row.scrapRate==''||scope.row.scrapRate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '报废率'">
                      <el-input v-model="scope.row.scrapRate" ref='editInput'  placeholder="报废率"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.scrapRate}}</div>
                    <!-- <span v-if="scope.row.scrapRate==''||scope.row.scrapRate==null"><el-input v-model="scope.row.scrapRate" placeholder="报废率"></el-input></span>
                    <span v-else>{{ scope.row.scrapRate}}</span> -->
                  </template>
              </el-table-column>
              <el-table-column
              prop="passRate"
              label="一次下线合格率"
              align="center"
              >
                <template slot-scope="scope">
                    <div v-if="scope.row.passRate==''||scope.row.passRate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '一次下线合格率'">
                      <el-input v-model="scope.row.passRate" ref='editInput'  placeholder="一次下线合格率"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.passRate}}</div>
                    <!-- <span v-if="scope.row.passRate==''||scope.row.passRate==null"><el-input v-model="scope.row.passRate" placeholder="一次下线合格率"></el-input></span>
                    <span v-else>{{ scope.row.passRate}}</span> -->
                  </template>
              </el-table-column>
              <el-table-column
              prop="planHaltDate"
              label="计划停机时间"
              align="center"
              >
                <template slot-scope="scope">
                    <div v-if="scope.row.planHaltDate==''||scope.row.planHaltDate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '计划停机时间'">
                      <el-input v-model="scope.row.planHaltDate" ref='editInput'  placeholder="计划停机时间"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.planHaltDate}}</div>
                    <!-- <span v-if="scope.row.planHaltDate==''||scope.row.planHaltDate==null"><el-input v-model="scope.row.planHaltDate" placeholder="计划停机时间"></el-input></span>
                    <span v-else>{{ scope.row.planHaltDate}}</span> -->
                  </template>
              </el-table-column>
              <el-table-column
              prop="shiftDurat"
              label="班组总时长"
              align="center"
              >
                  <template slot-scope="scope">
                    <div v-if="scope.row.shiftDurat==''||scope.row.shiftDurat==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班组总时长'">
                      <el-input v-model="scope.row.shiftDurat" ref='editInput'  placeholder="班组总时长"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.shiftDurat}}</div>
                    <!-- <span v-if="scope.row.shiftDurat==''||scope.row.shiftDurat==null"><el-input v-model="scope.row.shiftDurat" placeholder="班组总时长"></el-input></span>
                    <span v-else>{{ scope.row.shiftDurat}}</span> -->
                  </template>
              </el-table-column>
  
              <el-table-column
              prop="shiftTheoryTotal"
              label="班组理论生产总数"
              align="center"
              >
                <template slot-scope="scope">
                    <div v-if="scope.row.shiftTheoryTotal==''||scope.row.shiftTheoryTotal==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班组理论生产总数'">
                      <el-input v-model="scope.row.shiftTheoryTotal" ref='editInput'  placeholder="班组理论生产总数"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.shiftTheoryTotal}}</div>
                    <!-- <span v-if="scope.row.shiftTheoryTotal==''||scope.row.shiftTheoryTotal==null"><el-input v-model="scope.row.shiftTheoryTotal" placeholder="班组理论生产总数"></el-input></span>
                    <span v-else>{{ scope.row.shiftTheoryTotal}}</span> -->
                  </template>
              </el-table-column>
              <el-table-column
              prop="pointTagValue"
              label="班次结算标签"
              align="center"
              >
                <template slot-scope="scope">
                    <div v-if="scope.row.pointTagValue==''||scope.row.pointTagValue==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班次结算标签'">
                      <el-input v-model="scope.row.pointTagValue" ref='editInput'  placeholder="班次结算标签"  @blur="inputBlur(scope)" />
                    </div>
                    <div class="inputnum" v-else>{{ scope.row.pointTagValue}}</div>
                    <!-- <span v-if="scope.row.pointTagValue==''||scope.row.pointTagValue==null"><el-input v-model="scope.row.pointTagValue" placeholder="班次结算标签"></el-input></span>
                    <span v-else>{{ scope.row.pointTagValue}}</span> -->
                  </template>
              </el-table-column>
              <el-table-column
                    prop="quality"
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  @click="tosubmit(scope.row)" type="text" size="small">提交</el-button>
                    </template>
                </el-table-column>
          </el-table>
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getshiftlist"
          />
      </div>
  
    </div>
  </template>
  
  <script>
    import { mapGetters } from 'vuex'
    import {shiftlist,shiftsave} from "@/api/associationanalysis/associationanalysis";
  
     
    export default {
      name: 'saledetail',
      components:{
      },
      data() {
        return {
          rowIndex: -1, //行索引
          columnIndex: -1, //列索引
          timeval:[],
          beginDate:'',
          endDate:'',
          input:'',
          listLoading:false,
          total: 3,
          // 查询参数
          queryParams: {
              reportRecordId:null,
              pageNum: 1,
              pageSize: 10,
          },
          dataList:[],
          passRate:'',
          scrapRate:''
        }
      },
      computed: {
        ...mapGetters([
          'roles',"userMsg",'statusFail','statusSuccess','userId','tenantId','tenantType'
        ])
      },
  
      mounted() {
          // console.log("this.$route.params",this.$route.params)
        // this.queryParams.reportRecordId=this.$route.params.id
        this.getshiftlist()
      },
      methods: {
        //把每一行的索引加到行数据中
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex
          },
        //把每一列的索引加到列数据中
        tableCellClassName({ column, columnIndex }) {
            column.index = columnIndex
        },
        //单元格被点击时会触发该事件
        cellClick(row, column, cell, event) {
          // console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)
          if (column.label == '报废率'||column.label == '计划停机时间'||column.label == '一次下线合格率'||column.label == '班组总时长'||column.label == '班组理论生产总数'||column.label == '班次结算标签') {
            this.rowIndex = row.index
            this.columnIndex = column.index
              // this.$nextTick(() => {
              //   // this.$refs['editInput'][0].focus()//没有没有自动聚焦效果的话可能是这里出现问题 需要打印出来看一下
              //   //console.log(this.$refs['editInput'])
              // })
          }
        },
        //输入框失去焦点事件（初始化中间变量）
        inputBlur(scope) {
            this.rowIndex = -1
            this.columnIndex = -1
        },
        // 时间选择
        dataChange(data){
          // console.log(data)
          if(data==null){
              this.beginDate=''
              this.endDate=''
          }else{
              this.beginDate=data[0]
              this.endDate=data[1]
          }
        },
        searchbtn(){
          this.getshiftlist()
        },
        getshiftlist() { 
            this.listLoading=true;
            this.queryParams.beginDate=this.beginDate
            this.queryParams.endDate=this.endDate
            shiftlist(this.queryParams).then((response) => {
                this.total = response.total;
                this.dataList = response.rows
                this.listLoading=false;
            })
        },
        tosubmit(row){
          console.log(row)
          shiftsave(row).then((response) => {
            this.getshiftlist()
          })
        },
      }
    }
  </script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
    
  </style>