How to do inline-edit in vue-table?

[daimon99]

Hello,

I want to do a inline-edit.
For example, a cell

<td>
<input type="checkbox">
<span>male</span>
</td>

I want to do: when user click this cell, the value is changed to "female", and save it back to db.

How should I do it?

Thank you.

[ratiw]

@daimon99 Sorry, vuetable does not support inline-edit and it does not handle any update to your db directly. But you can define item-actions to popup a modal for edit and later gather the updated data and send to your server for updating to your db. vuetable is really just a client side interface handling the display of data.

[daimon99]

I have added a 'cell-clicked' event to dual with this situation.
Use like this:

events:{
      'vuetable:cell-clicked'(item, fields, event){
        if (fields.name == 'is_noticed'){
          console.log(item, fields, event)
          item.is_noticed = item.is_noticed == '0' ? '1': '0'
          this.$http.patch('/p/api/insurances/' + item.id + '/', item).then(success=>{
            console.log('更新notice成功, ', item.is_noticed)
          }).catch(fail=>{
            item.is_noticed = item.is_noticed == '0' ? '1':'0'
            swal('更新失败', JSON.stringify(fail.data), 'error')
          })
        }
      },

What about this method?

[ratiw]

@daimon99 Looks ok to me, but please watch out for side effect by testing thoroughly as this is an instance update to your server side database. It always feel strange to me doing the fine-grained update like this.

FYI, the cell-clicked event has just been added in the develop branch to fix side effect of using row-clicked event with toggle-detail event as discussed in this issue #51. However, I do not have time to update the document yet, so the update release might be next week or so.

[ratiw]

@daimon99 Please also checkout #26.

[madhusudhan1234]

The default button for the edit records in vue-table is like this

<button title="View" data-toggle="tooltip" data-placement="left" class="btn btn-info">
         <i class="glyphicon glyphicon-zoom-in"></i> 
</button>

How can i make it like this structure using vue-table

<a href="/blogs/1/edit">
<button title="View" data-toggle="tooltip" data-placement="left" class="btn btn-info">
       <i class="glyphicon glyphicon-zoom-in"></i> 
</button>
</a>

Thank you for the help in advance

[ratiw]

@madhusudhan1234 You can't unless you make it a component and use __component special field.
Please see the example here.

[madhusudhan1234]

@ratiw Thank you for the reply. Now I get the idea How to do it.