填补大佬文档的空白 umyui组件做出可编辑表格效果

填补大佬文档的空白 umyui组件做出可编辑表格效果

1.功能需求

1.1 功能原图

需要在操作列加上编辑等功能（现在只有删除功能）

1.2 编辑表格效果

废话不多说直接上改完后的效果图，我们可以看到上面的图片在没点击编辑按钮之前是不可编辑状态，整个表格只是处于展示数据的状态，按下编辑按钮之后表格变为可编辑状态，并且点击其他地方编辑状态不会消失，不管你是点空白处，还是点其他编辑按钮，只有点击取消的按钮才能解除编辑状态，效果如下图所示:

再说一遍，这里的除了可编辑表格这一行，其他行的编辑，转个人，取消按钮都是不可点击的
做这个umyui的大佬实例里面只给我们展示了编辑表格的基础写法，没有实现虚拟表格可编辑，所以在此补充，如果想要看umyui文档的童鞋可以移步，传送门http://www.umyui.com/umycomponent/manualTrigger

2基础表格的图片展示

2.1 基础表格效果图

2.2示例代码

 <ux-grid
   //其他可以绑定的属性忽略，自己看文档，这里只展示切换**可编辑的属性**
   :edit-config="{trigger: 'manual', mode: 'row'}
 >
  <ux-table-column type="checkbox" width="60"></ux-table-column>
  <ux-table-column type="index" width="80"></ux-table-column>
  <ux-table-column field="name" title="名字" width="140" edit-render>
      <template v-slot:edit="scope">
         <el-input v-model="scope.row.name"></el-input>
      </template>
  </ux-table-column>
  <ux-table-column field="age" title="年龄"  width="160" edit-render>
    <template v-slot:header="{ column }">
       <span>{{ column.title }}</span>
    </template>
    <template v-slot:edit="{ row }">
       <el-input
        v-model="row.age"
         type="number"
         placeholder="请输入内容"
         @input="updateFooterEvent(row.age)"
         style="width: 100%"></el-input>
     </template>
 </ux-table-column>
 //注意ux-table-column 这个标签的后面一定要绑定edit-render不然无法实现编辑功能，控制台打开会报错
<ux-table-column field="sex" title="性别" min-width="140" edit-render>
<template v-slot:edit="scope">
	<el-select v-model="scope.row.sex" @change="$refs.plxTable.updateStatus(scope)">
	 <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
	</el-select>
</template>
 <template v-slot="{ row }">{{ getLabel(row.sex) }}</template>
</ux-table-column>
<ux-table-column title="操作" width="200">
  <template v-slot="{ row }">
     <!--判断行是否激活了, 编辑按钮执行的方式就是为了去激活-->
  <template v-if="$refs.plxTable.isActiveByRow(row)">
   <el-button @click="saveEvent(row)" type="primary">保存</el-button>
   <el-button @click="cancelRowEvent(row)">取消</el-button>
   </template>
<template v-else>
   <el-button @click="editRowEvent(row)">编辑</el-button>
</template>
</template>
</ux-table-column>
</ux-grid>

注意template在vue模板解析的时候会不生产dom树，并且一个最外面的template只能包一个div(这是vue的知识)
注意: ux-grid edit-config绑定之后， ux-table-column一定要绑定edit-render ！！！！！！！！！！！！！！！！！！！！非常重要

2.3 改进后的可编辑表格代码(达到企业级开发需求)

<ux-grid
     ref="plxTable_manage"
     keep-source
     :height="height"
     show-overflow="tooltip"
     :highlight-current-row="false"
     :cell-class-name="cellClassName"
     :data="tableDataList"
     show-summary
     :edit-config="{trigger:'manual',mode:'row'}"   //这里配置可编辑是一行编辑还是一个cell可编辑
     @table-body-scroll="scroll"
     @edit-closed="editClosedEvent"        //这里可以编辑失去焦点事件
   >
   <ux-table-column
      v-for="item in tableColumns"
      :key="item.prop"
      :title="item.label"
      :field="item.prop"
      :sortable="item.sortable"
      :width="item.width?item.width:'220'"
      :edit-render="item.editRender"  //设置是否编辑与v-slot:edit配合（这个是绑定一行是否可编辑）
      align="center"
   >
   <template v-if="['bondCodeOuter','bondName','bondType'].includes(item.prop)" slot="header">
       <!--这里是弹出搜索框-->
       <i class="el-icon-search" @click="toggleSearchInput(item.prop,item.label)"></i>  
       <span style="margin-left: 10px">{{item.label}}</span>
   </template>   
   <template v-if="item.editRender" v-slot:edit="scope">
       <!--这里可以根据绑定的item.type来选择是输入框还是下拉框-->
       <el-inupt v-if="item.type=='input'" v-model="scope.row[item.prop]"></el-inupt>
       <!--这边与data中的tableColumns中的type属性对应，如果是input则是输入框，如果是
         item.type是select则是选择框
       -->
       <el-select v-if="item.type=='select'" v-model="scope.row[item.prop]" aria-placeholder="请选择">
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.label"
          >
          </el-option>
       </el-select>
   </template>              
   </ux-table-column>
   <ux-table-column title="操作" width="130">   
      <template v-slot="{row}">
         <template v-if="$refs.plxTable_manage&&$refs.plxTable_manage.isActiveByRow(row)"> 
            <el-link @click="saveBond(row,'1','0')"  type="primary">保存</el-link>
            <el-link @click="cancelRowEventOne(row)">取消</el-link>
     </template>
     <template v-else>
      <el-link @click="editRowEventP(row)" type="primary">编辑</el-link>
      <el-link @click="convertToAll(row,'0')" type="primary">转全员</el-link> 
       <el-popover
        placement="top"
        width="150"
        v-model="row.visible2">
        <p>确认删除吗?</p>
        <div style="text-align: right;margin: 0">
        <el-button size="mini" type="text" @click="handleDelete(row,'-1','0')">取消</el-button>             
        <el-button type="primary" size="mini" @click="handleDelete(row,'0','0')">确认</el-button>  
         </div>     
         <el-link slot="reference" type="primary">删除</el-link>
         </el-popover>   
     </template>  
    </template>    
   </ux-table-column>
  </ux-grid>


export default un.component(
{
   data(){
      return{
      //editRender为true的地方表示这些字段可以编辑，可以控制哪几列要编辑
         tableColumns:[
              {label:"债券代码",prop:"bondCodeOuter",width:"",sortable:true,type:'input'},
              {label:"债券简称",prop:"bondName",width:"",sortable:true,type:'input'},
              {label:"债券类型",prop:"bondType",width:"",sortable:true,type:'input'},
              {label:"债券发行人",prop:"issuerCname",width:"",sortable:true,type:'input'},
              {label:"剩余期限(年)",prop:"bondTerm",width:"",sortable:true,type:'select',editRender:true},
              {label:"债券活跃度分类",prop:"bondActivity",width:"",sortable:true,type:'input',editRender:true},
              {label:"最大单笔报价量(万元)",prop:"maxQuoteVolume",width:"",sortable:true,type:'input',editRender:true},
              {label:"最大空头头寸(万元)",prop:"maxLongPosition",width:"",sortable:true,type:'input',editRender:true},
              {label:"单笔默认询价量",prop:"maxShortPosition",width:"",sortable:true,type:'input',editRender:true},
              {label:"单笔默认询价量",prop:"defaultInquiryVolume",width:"",sortable:true,type:'input',editRender:true},
          ], 

      }
   },
   methods:{
       <!--这边还要求在编辑一行的时候，点击其他地方不能使编辑失效，就要用到失去焦点的时候，还是保持编辑状态，并在<el-link @click="editRowEventP(row)" type="primary">编辑</el-link>
      <el-link @click="convertToAll(row,'0')" type="primary">转全员</el-link> 
       <el-popover
        placement="top"
        width="150"
        v-model="row.visible2">
        <p>确认删除吗?</p>
        <div style="text-align: right;margin: 0">
        <el-button size="mini" type="text" @click="handleDelete(row,'-1','0')">取消</el-button>             
        <el-button type="primary" size="mini" @click="handleDelete(row,'0','0')">确认</el-button>  
         </div>     
         <el-link slot="reference" type="primary">删除</el-link>
         </el-popover>中的el-link和el-popover标签里面加上:disabled="editStatus=='edit'"-->
       <!--用edit来判断有焦点和失去焦点-->
       editClosedEvent({row}){
           if(this.editStatus=="edit"){
                 //当为编辑状态时聚焦
                this.$refs.plxTable_manage.setActiveRow(row);       
           }else{
               //其他时候失去焦点
              this.editStatus = ""
            }
       },
       <!--但是这样会出现一个问题，在点击其他按钮刷新时会锁住所有的按钮，因为按钮标签的地方加上
         了:disabled="editStatus=='edit'"，所以必须要在刷新方法中加上this.editStatus=""将
         editStatus置为""
          -->
       <!--如:loadList()重新查询数据方法-->
       loadList(){
            this.editStatus=""
            //其他查询逻辑
       }


   }

})