VueJs Smart Table with Add Edit Delete Records – Dynamic Table
I have a Simple button add row data and a text box. when I click double click to input a certain simple number in a text box HTML elements I want to add row the number of rows base on the all the content number in the text box.
Smart table or inline editor using vue.js – Add row , Delete Rows, Remove Rows sorting columns, and filter by string, all of the child rows,create a customs columns, custom row simple data.Different ways of inline editing in table
Include Libs
vue.min.js bootstrap.min.css
VueJs Smart Table with Add Edit Delete Records – Dynamic Table
index.html
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
<div id="liveApp" class="container"> <div class="row"> <div class="col-6"> <h2>Live Web Application</h2> <div class="form-group"> <div class="form-check form-check-inline"> <label class="form-check-label"> Product All </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> Klarmarkerade </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> Ej klarmarkerade </label> </div> </div> <table class="table table-striped table-hover"> <tbody> <tr class="todoitem"> <td> <span>{{ item.title }}</span> </td> <td class="text-right"><button class="btn btn-warning badge badge-pill">Remove Status</button></td> <td><button title="Remove" class="btn btn-danger badge badge-pill">X</button></td> </tr> </table> <p>No Found Of The Data</p> </div> <div class="col-5 offset-1"> <h2>Add Client</h2> </div> </div> </div>
app.js
var filters = { ItemDisplay: { all: function(items) { return items; }, completed: function(items) { return items.filter(function(item) { return item.isCompleted; }); }, notcompleted: function(items) { return items.filter(function(item) { return !item.isCompleted; }); } } }; var todoliveApp = new Vue({ el: '#liveApp', data: { newItem: '', editedItem: null, livedataItems: [ { title: 'råna en pensionär', isCompleted: false }, { title: 'drick bärz', isCompleted: true }, { title: 'beställ 107 pizzor och hämta ej', isCompleted: false } ], filterAttribute: 'all' }, methods: { createItem: function() { var newItemValue = this.newItem; if(!newItemValue) { return } this.livedataItems.push({ title: newItemValue, isCompleted: false }); this.newItem = ''; }, updateItem: function(item) { this.beforeEditCache = item.title; this.editedItem = item; }, saveItem: function(item) { if(!this.editedItem) { return } this.editedItem = null; if(!item.title) { this.dismisItem(item); } }, dismisItem: function(item) { item.title = this.beforeEditCache; }, DeleteItem: function(itemIndex) { this.livedataItems.splice(itemIndex,1); }, StatusCustom: function(item) { Vue.set(item, 'isCompleted', !item.isCompleted); } }, computed: { DynemicFilter: function() { return filters.ItemDisplay[this.filterAttribute](this.livedataItems); } } })