vxe-table 可编辑表格

<template>
  <div style="padding: 0 0 20px 0">
  <vxe-table
    :keep-source=true
    ref="xTable"
    border
    :data="jydys"
    :span-method="rowspanMethod"
    max-height="550px"
    :edit-config="{trigger: 'dblclick', mode: 'cell'}"
    @edit-closed="editClosedEvent"
    @edit-actived="editActivedEvent"
  >
    <vxe-table-column align="center" type="seq" title="序号" width="60"></vxe-table-column>
    <vxe-table-column align="center" field="jydyName" title="交易单元名称"></vxe-table-column>
    <vxe-table-column align="center" field="timepartName" title="时间段"></vxe-table-column>
    <vxe-table-column align="center" field="reportName" title="峰平谷" :formatter="reportTypeChang"></vxe-table-column>
    <vxe-table-column align="center" field="bandNum" title="段号"></vxe-table-column>
    <vxe-table-column align="center" field="energy" title="电量" ></vxe-table-column>
    <vxe-table-column align="center" field="price" title="电价" ></vxe-table-column>
    <vxe-table-column align="center" field="checkEnergy" title="省校核电量"  :edit-render="{name: 'input', attrs: {type: 'number'}}"></vxe-table-column>
    <vxe-table-column align="center" field="ordNum" title="排序号"  :edit-render="{name: 'input', attrs: {type: 'number'}}" ></vxe-table-column>
    <vxe-table-column  align="center" field="validateFlag" title="是否属于有效申报"  :edit-render="{name: 'select', options: validateFlags}" :formatter="validateFlag"></vxe-table-column>
    <vxe-table-column align="center" field="reason" title="校核原因"  :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
  </vxe-table>
      <!-- 分页 -->
      <vxe-pager
        :current-page="queryParam.pageInfo.pageNum"
        :page-size="queryParam.pageInfo.pageSize"
        :total="queryParam.pageInfo.total"
        :layouts="['Total', 'Sizes','PrevPage', 'JumpNumber', 'NextPage', 'FullJump']"
        @page-change="handleCurrentChange">
      </vxe-pager>

  </div>
</template>

<script>

export default {
  data() {
    return {
    
      },
    
  },
  mounted() {

  },
  methods: {
    // 分页
    handleCurrentChange({ currentPage, pageSize }) {
      this.queryParam.pageInfo.pageSize = pageSize
      this.queryParam.pageInfo.pageNum = currentPage
      this.queryBidinfo(this.queryParam)
    },
 
  
    //表单关闭事件
    editClosedEvent ({row,rowIndex,$rowIndex,column,columnIndex,$columnIndex,cell}) {
      let xTable = this.$refs.xTable
      let field = column.property //获取到修改的字段
      let cellValue = row[field] //获取到修改的值
      // 判断单元格值是否被修改
      if (xTable.isUpdateByRow(row, field)) {
        this.queryBidinfo()
          makeSureApi.bidInfoDataCheck([row]).then(res =>{
            this.queryBidinfo()
            if(res.status === 0){
              // 局部更新单元格为已保存状态
              this.$vMessage({
                type: 'success',
                message: '操作成功!',
                duration: 2000
              })
            }else{
              row[field] = this.cellvalue
              this.queryBidinfo()
              this.$vMessage({
                type: 'success',
                message: res.message,
                duration: 2000
              })
            }
          })
      }
    },
    editActivedEvent({row,rowIndex,$rowIndex,column,columnIndex,$columnIndex,cemychangell}){
      // 获取单元格激活时的值
        this.cellvalue= cell.innerText
    },

    // 合并单元格
    rowspanMethod ({ row, $rowIndex, column, data }) {
      let fields = ['jydyName', 'timepare', 'reportType']
      let cellValue =  row[ column.property]
      if (cellValue && fields.includes(column.property)) {
        let prevRow = data[$rowIndex - 1]
        let nextRow = data[$rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = data[++countRowspan + $rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

< template >

   < div  style= "padding: 0 0 20px 0" >

   < vxe-table

    : keep-source=true

     ref= "xTable"

     border

    : data=" jydys"

    : span-method=" rowspanMethod"

     max-height= "550px"

    : edit-config="{ trigger:  'dblclick',  mode:  'cell'}"

    @ edit-closed=" editClosedEvent"

    @ edit-actived=" editActivedEvent"

   >

     < vxe-table-column  align= "center"  type= "seq"  title= "序号"  width= "60" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "jydyName"  title= "交易单元名称" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "timepartName"  title= "时间段" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "reportName"  title= "峰平谷" : formatter=" reportTypeChang" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "bandNum"  title= "段号" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "energy"  title= "电量"  ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "price"  title= "电价"  ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "checkEnergy"  title= "省校核电量"  : edit-render="{ name:  'input',  attrs: { type:  'number'}}" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "ordNum"  title= "排序号"  : edit-render="{ name:  'input',  attrs: { type:  'number'}}"  ></ vxe-table-column >

     < vxe-table-column   align= "center"  field= "validateFlag"  title= "是否属于有效申报"  : edit-render="{ name:  'select',  options:  validateFlags}" : formatter=" validateFlag" ></ vxe-table-column >

     < vxe-table-column  align= "center"  field= "reason"  title= "校核原因"  : edit-render="{ name:  'input',  attrs: { type:  'text'}}" ></ vxe-table-column >

   </ vxe-table >

       <!-- 分页 -->

       < vxe-pager

        : current-page=" queryParam. pageInfo. pageNum"

        : page-size=" queryParam. pageInfo. pageSize"

        : total=" queryParam. pageInfo. total"

        : layouts="[ 'Total',  'Sizes', 'PrevPage',  'JumpNumber',  'NextPage',  'FullJump']"

        @ page-change=" handleCurrentChange" >

       </ vxe-pager >

   </ div >

</ template >

< script >

export  default {

   data() {

     return {

    

      },

    

  },

   mounted() {

  },

   methods: {

     // 分页

     handleCurrentChange({  currentPage,  pageSize }) {

       this. queryParam. pageInfo. pageSize =  pageSize

       this. queryParam. pageInfo. pageNum =  currentPage

       this. queryBidinfo( this. queryParam)

    },

 

  

     //表单关闭事件

     editClosedEvent ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell}) {

       let  xTable =  this. $refs. xTable

       let  field =  column. property  //获取到修改的字段

       let  cellValue =  row[ field]  //获取到修改的值

       // 判断单元格值是否被修改

       if ( xTable. isUpdateByRow( row,  field)) {

         this. queryBidinfo()

           makeSureApi. bidInfoDataCheck([ row]). then( res  =>{

             this. queryBidinfo()

             if( res. status ===  0){

               // 局部更新单元格为已保存状态

               this. $vMessage({

                 type:  'success',

                 message:  '操作成功!',

                 duration:  2000

              })

            } else{

               row[ field] =  this. cellvalue

               this. queryBidinfo()

               this. $vMessage({

                 type:  'success',

                 message:  res. message,

                 duration:  2000

              })

            }

          })

      }

    },

     editActivedEvent({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cemychangell}){

       // 获取单元格激活时的值

         this. cellvalue=  cell. innerText

    },

     // 合并单元格

     rowspanMethod ({  row,  $rowIndex,  column,  data }) {

       let  fields = [ 'jydyName',  'timepare',  'reportType']

       let  cellValue =   row[  column. property]

       if ( cellValue &&  fields. includes( column. property)) {

         let  prevRow =  data[ $rowIndex -  1]

         let  nextRow =  data[ $rowIndex +  1]

         if ( prevRow &&  prevRow[ column. property] ===  cellValue) {

           return {  rowspan:  0,  colspan:  0 }

        }  else {

           let  countRowspan =  1

           while ( nextRow &&  nextRow[ column. property] ===  cellValue) {

             nextRow =  data[++ countRowspan +  $rowIndex]

          }

           if ( countRowspan >  1) {

             return {  rowspan:  countRowspan,  colspan:  1 }

          }

        }

      }

    }

  }

}

</ script >

< style  scoped >

</ style >