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

Posted 2023-03-07 lovoo

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>