element表格打分 自动保存，实时排序

image.png

1.自动保存

  <el-table-column
    prop="pf2"
    label="前瞻性、时效性(20分)"
    header-align="center"
    align="center"
  >
    <template #header>
      <span>前瞻性、时效性</span><br><span>(20分)</span>
    </template>
    <template
      #default="{ row, $index }"
      style="font-size: 18px;"
    >
      <el-input
        v-if="tabClickIndex === row.sbbId&&pf2 === true"
        v-model="row.pf2"
        ref="inputRef"
        @blur="inputBlur(row, $index)"
      ></el-input>
      <div v-else>{{ row.pf2 }}</div>
    </template>
  </el-table-column>

处理：

// 点击单元格显示输入框
tabClickInput(row, column, cell, event) {
  console.log('row', row);
  console.log('column', column);
  console.log('cell', cell);
  console.log('event', event);
  if (this.title.isSubmit == '已提交') {
    this.$message.error('已经全部提交!');
    return
  }
  if (this.isProhibit === false) {
    if (column.label === "政策影响力/行业影响力/提升中电联影响力/新增经济收益(60分)") {
      this.pf1 = true
    } else if (column.label === "前瞻性、时效性(20分)") {
      this.pf2 = true
    } else if (column.label === "创新性(20分)") {
      this.pf3 = true
    }
    console.log('this.tabClickIndex', this.tabClickIndex);
    this.tabClickIndex = row.sbbId
    this.$nextTick(() => {
      this.$refs.inputRef.focus();
    })
  }
},
// 输入框失焦
inputBlur(row, index) {
  this.pf1 = false
  this.pf2 = false
  this.pf3 = false

  var reg = /^[0-9]+(.[0-9]{1,2})?$/
  if (row.pf1 != 0 && row.pf1 != '' && row.pf1 != null) {
    if (reg.test(Number(row.pf1))) {
    } else {
      this.$message.error('最多输入2位小数!');
      row.pf1 = Math.round(row.pf1)
      return
    }
  }

  if (!isNaN(row.pf1) && !isNaN(row.pf2) && !isNaN(row.pf3)) {

    if (row.pf1 != null) {
      if (row.pf1 < 0) {
        this.$message.error('请在打分区间内打分!');
        row.pf1 = ''
      }
      if (row.pf1 > 60) {
        this.$message.error('请在打分区间内打分!');
        row.pf1 = ''
      }
    }
    if (row.pf2 != null) {
      if (row.pf2 < 0) {
        this.$message.error('请在打分区间内打分!');
        row.pf2 = ''
      }
      if (row.pf2 > 20) {
        this.$message.error('请在打分区间内打分!');
        row.pf2 = ''
      }
    }
    if (row.pf3 != null) {
      if (row.pf3 < 0) {
        this.$message.error('请在打分区间内打分!');
        row.pf3 = ''
      }
      if (row.pf3 > 20) {
        this.$message.error('请在打分区间内打分!');
        row.pf3 = ''
      }
    }
  } else {
    // this.isProhibit = true
    this.$message.error('请输入数字!');
    return
  }
  // this.isProhibit = false
  // row.pf1 = this.roundFractional(row.pf1, 2)
  // row.pf2 = this.roundFractional(row.pf2, 2)
  // row.pf3 = this.roundFractional(row.pf3, 2)
  row.pfZf = formateFloat((row.pf1 * 1 + row.pf2 * 1 + row.pf3 * 1).toFixed(2), 2)
  // row.pfZf = String((row.pf1 * 1 + row.pf2 * 1 + row.pf3 * 1).toFixed(2))
  if (row.pfZf > 60) {
    // row.isValid = 'Y'
    // this.tijiao = ''
    this.save(row)
    this.saveList()
  } else {
    // row.isValid = 'N'
    // this.tijiao = '1'
    this.save(row)
    this.saveList()
    // this.$message.warning('请打总分60分以上!');
  }
},

2.实时排序

    <el-table-column
    prop="paiming"
    label="排名"
    width="80"
    sortable
    :sort-method="sortMethod"
  >
    <template #header>
      <span>排名</span>
    </template>
    <template slot-scope="scope">
      {{ scope.row.paiming }}
    </template>
  </el-table-column>

js

 saveList() {
  this.shuzuList = []
  for (let i = 0; i < this.tableData.length; i++) {
    this.shuzuList.push(this.tableData[i])
  }
  this.shuzuList.sort(function (a, b) {
    return b.pfZf - a.pfZf;
  });
  let that = this
  this.ranked.pfgxcxlist = this.shuzuList.map(function (item, i) {
    if (i > 0) {
      var prevItem = that.shuzuList[i - 1];
      if (Number(prevItem.pfZf) == Number(item.pfZf)) {
        item.rank = prevItem.rank;
      } else {
        item.rank = i + 1;
      }
    } else {
      item.rank = 1;
    }
    return item;
  });
  for (let i = 0; i < this.tableData.length; i++) {
    for (let j = 0; j < this.ranked.pfgxcxlist.length; j++) {
      if (this.ranked.pfgxcxlist[j].sbbId == this.tableData[i].sbbId) {
        this.tableData[i].paiming = this.ranked.pfgxcxlist[j].rank
      }
    }
  }
  console.log(this.tableData);
  savePfGxcxList(this.ranked).then(
    ret => {
      let checkmsg = this.$checkResult(ret)
      if (checkmsg === "OK") { //成功返回
        // this.loading = false;
        // this.$message.success('保存成功')
        this.refreshTableData();
      }
      else {
        this.loading = false;
        this.$message.error(ret.msg)
      }
    }
  )
},
sortMethod(before, after) {
  return Number(before.paiming) - Number(after.paiming);
},

处理逻辑：

var ranked = data.map(function(item, i) { 
if (i > 0) { 
    var prevItem = data[i - 1]; 
    if (prevItem.score == item.score) { 
        item.rank = prevItem.rank; 
    } else { 
        item.rank = i + 1; 
    } 
} else { 
    item.rank = 1; 
} 
 
return item; 
});