vue+element 表格單元格內添加/編輯

 

 

需求：

點擊某個單元格可以添加、修改數據，點擊底部按鈕並且保存數據

 

<el-tabs type="border-card" v-model="configure" @tab-click="handleClick">
      <el-tab-pane label="配置因子" name="first">
        <el-table :data="tableData1" style="width:100%;">
          <el-table-column type="index" width="50" label="序號"></el-table-column>
          <el-table-column prop="deptTypeTrans" label="類型"></el-table-column>
          <el-table-column prop="deptName" label="部門"></el-table-column>
          <el-table-column prop="headQuarterWeight" label="各單位總部因子">
            <template slot-scope="scope">
                <div class="sine" @click="dataClick(scope.row, scope.row.headQuarterWeight)" v-if="!scope.row.headQuarterWeight.edit">{{scope.row.headQuarterWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.headQuarterWeight.label" @blur="loseFcous(scope.row, scope.row.headQuarterWeight)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="projectCompanyWeight" label="項目公司因子">
            <template slot-scope="scope">
                <div class="sine"  @click="dataClick(scope.row, scope.row.projectCompanyWeight)" v-if="!scope.row.projectCompanyWeight.edit">{{scope.row.projectCompanyWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.projectCompanyWeight.label" @blur="loseFcous(scope.row, scope.row.projectCompanyWeight)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="contractingWeight" label="總承包因子">
            <template slot-scope="scope">
                <div class="sine"  @click="dataClick(scope.row, scope.row.contractingWeight)" v-if="!scope.row.contractingWeight.edit">{{scope.row.contractingWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.contractingWeight.label" @blur="loseFcous(scope.row, scope.row.contractingWeight)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="level3ProjectWeight" label="三級項目">
            <template slot-scope="scope">
                <div class="sine"  @click="dataClick(scope.row, scope.row.level3ProjectWeight)" v-if="!scope.row.level3ProjectWeight.edit">{{scope.row.level3ProjectWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.level3ProjectWeight.label" @blur="loseFcous(scope.row, scope.row.level3ProjectWeight)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="trusteeshipProjectWeight" label="（托管）項目公司因子">
            <template slot-scope="scope">
                <div class="sine"  @click="dataClick(scope.row, scope.row.trusteeshipProjectWeight)" v-if="!scope.row.trusteeshipProjectWeight.edit">{{scope.row.trusteeshipProjectWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.trusteeshipProjectWeight.label" @blur="loseFcous(scope.row, scope.row.trusteeshipProjectWeight)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="trusteeshipHeadWeight" label="（托管）總承包因子">
            <template slot-scope="scope">
                <div class="sine"  @click="dataClick(scope.row, scope.row.trusteeshipHeadWeight)" v-if="!scope.row.trusteeshipHeadWeight.edit">{{scope.row.trusteeshipHeadWeight.label}}</div>
                <el-input size="mini" v-else v-model="scope.row.trusteeshipHeadWeight.label" @blur="loseFcous(scope.row, scope.row.trusteeshipHeadWeight)"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSave1()">保存</el-button>
            <el-button size="small" type="info" @click="handleCancel1()">取消</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

 

data() {
    return {
      configure: 'first',
       tableData1: [
          {
              headQuarterWeight: {
                label: '',
                edit: false,
              },
              projectCompanyWeight: {
                label: '',
                edit: false,
              },
              contractingWeight: {
                label: '',
                edit: false,
              },
              level3ProjectWeight: {
                label: '',
                edit: false,
              },
              trusteeshipProjectWeight: {
                label: '',
                edit: false,
              },
              trusteeshipHeadWeight: {
                label: '（托管）總承包因子',
                edit: false,
              },
          }
        ],
    };
  },

 

 methods: {
    loseFcous(row, name) {
       name.edit = false;
     },
    dataClick(row, name) {
        console.log(name);
        name.edit = true;
    }
 }

 

 

問題記錄：

記錄在動態表頭的時候，點擊單元無法添加/編輯的問題，DOM結構中只有span沒有el-input框

 

<el-tab-pane label="配置各單位總部業務比例" name="second">
        <template>
          <el-table :data="tableData2" style="width:100%;" border>
            <el-table-column type="index" width="50" label="序號"></el-table-column>
            <el-table-column prop="deptTypeTrans" label="類型"></el-table-column>
            <el-table-column prop="deptName" label="部門"></el-table-column>
            <el-table-column v-for="item in tableData2" :key="item.id" :label="item.companyName" :prop="item.prop">
              <template slot-scope="scope" >
                <span class="sine" @click="dataClick(scope.row, scope.row.rate)" v-if="!scope.row.rate.edit">{{scope.row.rate.label}}</span>
                <el-input 
                  size="mini" 
                  oninput="value=value.replace(/[^\d.]/g,'')" 
                  v-focus 
                  v-else 
                  v-model="scope.row.rate.label" 
                  @blur="loseFcous(scope.row, scope.row.rate)">
                </el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSave2()">保存</el-button>
            <el-button size="small" type="info" @click="handleCancel2()">取消</el-button>
          </div>
        </template>
      </el-tab-pane>

 

methods: {
   loseFcous(row, name) {
        console.log(row, name);
        name.edit = false;
     },
    dataClick(row, name) {
        console.log(row, 'name');
        name.edit = true;
    },
   //獲取各單位總部業務比例
	getBusinProportion() {
		let params = {
      queryFields:JSON.stringify({
        id: '',
        annual: this.searchParams.annual,					
        checkDeptId: '',					
        companyId: '',	
        rate: '',		
      })
		}
		this.$axios({
      method: 'get',
      url: this.getBusinExList,
      params: params
		}).then((res) => {
      console.log(res, '各單位總部業務比例數據')
      res.data.results.forEach(item => {
        item.rate = {
          label: item.rate || 10,
          edit: false
        }
      })
      this.tableData2 = res.data.results;
      console.log(this.tableData2, 'tableData2');
		})
	}    
}

 

原因：

1、更改視圖$set用錯了

    loseFcous2(row, name) {
        console.log(row, name.edit);
        this.$set(name, 'edit', false); //源數據、key、value
     },
    dataClick2(row, name) {
        console.log(row, name.edit);
        this.$set(name, 'edit', true);
    },

 2、自定義指令 v-focus影響的

因為v-focus是焦點存在或者離開的時候隱藏的，所以值是true的時候，指令又處理一次，焦點沒存在當前input上。（點擊按鈕，input顯示 但是input沒焦點）