Vue+ElementUI实现表格点击修改时间

1、效果图

2、vue脚本实现

2.1）定义变量showInput、oldData、currentData
2.2）通过自定义指令实现的表单自动获得光标的操作
2.3）给表格添加编辑事件@cell-click=“tableDbEdit” @cell-dblclick=“tableDbEdit”
2.4） 当input失去光标后进行的操作

<script>  
  export default {
    data() {
      return {        
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,        
        showInput: "",
        oldData: {},
        currentData: {}        
      }
    },    
    activated() {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      async getDataList() {
        this.dataListLoading = true
        const res = await this.$http({
          url: `/product/supplier/page`,
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'dataForm': this.dataForm
          })
        })
        let data = res.data
        console.log("data===", data)
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
          this.dataList.forEach(item => {
            item.status = item.status == 1 ? true : false
          })
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      },     
      // 当input失去光标后进行的操作
      async blurInput(row, name, value) {
        // 判断数据是否有所改变，如果数据有改变则调用修改接口
        if (this.oldData[name] != value) {
          row[name] = value
          if (value === true) {
            row[name] = 1
          } else if (value === false) {
            row[name] = 0
          }
        }
        this.showInput = ""
        this.currentData = row
      },
      tableDbEdit(row, column, event) {
        this.showInput = column.property + row.supplierId;
        this.oldData[column.property] = row[column.property];
      },      
    },

    directives: {
      // 通过自定义指令实现的表单自动获得光标的操作
      focus: {
        inserted: function(el) {
          if (el.tagName.toLocaleLowerCase() == "input") {
            el.focus()
          } else {
            if (el.getElementsByTagName("input")) {
              el.getElementsByTagName("input")[0].focus()
            }
          }
          el.focus()
        }
      },
      focusTextarea: {
        inserted: function(el) {
          if (el.tagName.toLocaleLowerCase() == "textarea") {
            el.focus()
          } else {
            if (el.getElementsByTagName("textarea")) {
              el.getElementsByTagName("textarea")[0].focus()
            }
          }
          el.focus()
        }
      }
    },
  }
</script>

3、ElementUI实现

<el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;" @cell-click="tableDbEdit" @cell-dblclick="tableDbEdit"
      :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
      
   <el-table-column prop="productTimeLimit" header-align="center" align="center" label="许可证期限" width="120" >
     <template slot-scope="scope">
       <el-date-picker
         v-model="scope.row.businessTimeLimit"
         type="date"
         v-if="showInput == `productTimeLimit${scope.row.supplierId}`"
         @blur='blurInput(scope.row, "productTimeLimit", scope.row.productTimeLimit)'
         value-format="yyyy-MM-dd"
         placeholder="选择日期"
         v-focus>
       </el-date-picker>
       <span v-else style="text-decoration:underline;">{{scope.row.productTimeLimit}}</span>
     </template>
   </el-table-column>
 </el-table>