标签：el string 焦点 单元格 focus 编辑 key any row

<template>
  <el-table
    ref="editabletable"
    v-loading="loading"
    element-loading-text="加载中"
    :data="dataSource"
    current-row-key="id"
    :header-cell-style="{background:'#F5F5F5',color:'#606266'}"
    :border="true"
    @cell-dblclick="handleCellClick"
  >
    <el-table-column
      prop="cell0"
      label="单元格0"
      align="center"
    >
      <template slot-scope="scope">
        <el-input-number
          v-if="scope.row.editable === 'cell0'"
          v-model="scope.row.cell0"
          v-focus
          style="width:80%"
          :controls="false"
          @blur="handleInputReset(scope.row)"
        />
        <span v-if="scope.row.editable !== 'cell0'">
          {{ scope.row.cell0 }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="cell1"
      label="摊销比例"
      align="center"
    >
      <template slot-scope="scope">
        <el-input-number
          v-if="scope.row.editable === 'cell1'"
          v-model="scope.row.cell1"
          v-focus
          style="width:80%"
          :controls="false"
          @blur="handleInputReset(scope.row)"
        />
        <span v-if="scope.row.editable !== 'cell1'">
          {{ scope.row.cell1 }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      dataSource: [{
        cell1: '单元格1',
        cell0: '单元格0',
        editable: '',
        isEdit: false,
      }]
    }
  },
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el: HTMLElement) {
        // 聚焦元素
        if (el) {
          el.querySelector('input').focus();
        }
      }
    }
  },
  methods: {
    handleCellClick (row: { [key: string]: any }, column: { [key: string]: any }): void {
      row.editable = column.property;
      row.isEdit = true;
    },
    handleInputReset (row: { [key: string]: any }): void {
      row.editable = '';
    }
  }
})
</script>

标签：el,string,焦点,单元格,focus,编辑,key,any,row
来源： https://www.cnblogs.com/cxyqts/p/15124740.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。