umy-ui表格单行编辑(解决单行编辑滑动后失效问题)

TableRowEdit.vue

<template>
  <div>
      <ux-grid
        :data="tableData"
        tooltip-effect="dark"
        show-overflow="tooltip"
        :cell-style="{'text-align':'center'}" 
        :row-class-name="tableRowClassName"
        :max-height="tableConfig.height"
        style="width: 100%">
        <ux-table-column
          v-if="isShow.isSelection"
          type="checkbox"
          width="40">
        </ux-table-column>
        <ux-table-column 
          type="index" 
          label="序号" 
          style="min-width: 80px;max-width:120px;" 
          width="60"
          v-if="isShow.isIndex">
        </ux-table-column>

        <ux-table-column
          v-for="(e, i) in columns"
          :key="i"
          :resizable="true"
          header-align="center"
          :field="e.fieldCode"
          :title="e.fieldName"
          min-width="140"
          >
          <template slot="header" slot-scope="scope">
            <div>{{ e.fieldName }}<i v-if="e.isSelect||e.isInput" class="el-icon-edit"></i></div>
          </template>
          <!-- 选择器 -->
          <template v-slot="scope" v-if="e.isSelect">
            <div v-if="scope.row.index==tableCli">
              <el-select 
                v-model="scope.row[e.fieldCode]" 
              >
                <el-option 
                  v-for="item in e.SelectList" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <span v-else>{{ getType(e.SelectList,scope.row[e.fieldCode]) }}</span>
          </template>
          <!-- 输入框 -->
          <template v-slot="scope" v-else-if="e.isInput">
            <div v-if="scope.row.index==tableCli">
              <el-input v-model="scope.row[e.fieldCode]"></el-input>
            </div>
            <span v-else>{{scope.row[e.fieldCode]}}</span>
          </template>

          <!-- 禁止编辑 -->
          <template v-slot="scope" v-else>
            <span>{{scope.row[e.fieldCode]}}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          fixed="right"
          title="操作"
          v-if="isShow.isShowButton"
          header-align="center"
          min-width="150">
          <template slot-scope="scope">
              <el-button 
                v-if="isShow.isShowButton&&scope.row.index!==tableCli"
                type="text" 
                @click="editButton(scope.row,scope)"
                :icon="isShow.iconEdit?isShow.iconEdit:'el-icon-edit'" 
                size="small"
              >
                {{ isShow.editTxt }}
              </el-button>
            <el-button type="text" v-if="scope.row.index==tableCli" @click="saveButton(scope.row,scope)" size="small">保存</el-button>
            <el-button type="text" v-if="scope.row.index==tableCli" size="small" @click="cancelEdit">取消</el-button>
          </template>
        </ux-table-column>
      </ux-grid>

      <el-pagination
          v-if="setPage.isPagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="setPage.currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="setPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="setPage.total">
      </el-pagination>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          tableCli:-1,
          // 自适应高度
          tableConfig:{
              isLoading:true,
              height:window.innerHeight-190
          },
        }
      },
      props:{
        // table 表格显示高度
        tableHeight:{
            type:Number,
            default:() => {
                return 190
            }
        },
        // 表头
        columns:{
            type:Array,
            default:() => {
                return []
            }
        },
        // 表格
        tableData:{
            type:Array,
            default:() => {
                return []
            }
        },
        // 页码的设置
        setPage:{
            type:Object,
            default:() => {
                return {
                    isPagination:false,//是否显示
                    currentPage:1,//当前页码
                    pageSize:100, // 当前页的数量
                    total:0, // 总量
                }
            }
        },
        // 是否显示
        isShow:{
            type:Object,
            default:() => {
                return {
                    
                }
            }
        },
      },
      created(){
        // 初始化开始监听自适应高度数据
        window.addEventListener("resize",this.getHeigth)
      },
      destroyed(){
        // 销毁高度自适应监听
        window.removeEventListener("resize",this.getHeigth)
      },
      watch:{
        tableHeight: {
            handler(newVal, oldVal) {
                this.tableConfig.height = window.innerHeight - newVal
            },
            deep: true,
            immediate: true
        }
      },
      methods:{
        // 此方法用于区分是否点击的是当前行
        tableRowClassName({row,rowIndex}){
          row.index=rowIndex
        },
        //  点击编辑事件
        editButton(row,index){
          this.tableCli=index.$rowIndex
        },
        // 行编辑保存事件
        saveButton(row,index){
          this.$emit("saveButton",row,index)
          
        },
        //  取消编辑
        cancelEdit(){
          this.tableCli = -1
        },
        //  转换格式
          getType(data,val) {
            const item = data.filter(item => item['value'] === val)[0]
            return item ? item.label : ''
          },
        // 自适应高度
        getHeigth(){
            // this.tableConfig.height = window.innerHeight - 170
            this.tableConfig.height = window.innerHeight - this.tableHeight
        },
        // 每页的数量
        handleSizeChange(val) {
            this.$emit("handleSizeChange",val)
        },
        // 当前页码
        handleCurrentChange(val) {
            this.$emit("handleCurrentChange",val)
        }
      }
    }
  </script>