vue. js+Element Realization of Addition Deletion and Modification in Table
- 2021-07-12 05:07:40
- OfStack
The new project uses a framework Element (http://element.eleme.io/#/zh-CN) written at the front end of vue.js to cooperate with vue.js for style filling
I used angularjs before, but later I found it more and more difficult to learn, so I decided to use vue. js
The following will introduce the addition, deletion and modification of vue. js application in the table under 1
Firstly, js of element under 1 is introduced
<script src="plugins/element-ui/index.js"></script>Then introduce the required js files related to vue
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>Let's talk about the html file first
<div id="user">
<!-- Operation -->
<ul class="btn-edit fr">
<li >
<el-button type="primary" @click="dialogCreateVisible = true"> Add User </el-button>
<el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" > Delete </el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" > Deactivate </el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" > Activate </el-button>
</li>
</ul>
<!-- User list -->
<el-table :data="users"
stripe
v-loading="loading"
element-loading-text=" Desperately loading ..."
style="width: 100%"
height="443"
@sort-change="tableSortChange"
@selection-change="tableSelectionChange">
<el-table-column type="selection"
width="60">
</el-table-column>
<el-table-column sortable="custom" prop="username"
label=" User name "
width="120">
</el-table-column>
<el-table-column prop="name"
label=" Name "
width="120">
</el-table-column>
<el-table-column prop="phone"
label=" Mobile phone "
>
</el-table-column>
<el-table-column prop="email"
label=" Mailbox ">
</el-table-column>
<el-table-column prop="create_time" sortable="custom" inline-template
label=" Date of registration "
width="260">
<div>{{ row.create_time | moment('YYYY Year MM Month DD Day HH:mm:ss')}}</div>
</el-table-column>
<el-table-column inline-template
label=" Operation "
width="250">
<el-button type="primary" size="mini" @click="removeUser(row)"> Delete </el-button>
<el-button type="primary" size="mini" @click="setCurrent(row)"> Edit </el-button>
</el-table-column>
</el-table>
<!-- Paging begin-->
<el-pagination class="tc mg"
:current-page="filter.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="filter.per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="total_rows"
@size-change="pageSizeChange"
@current-change="pageCurrentChange">
</el-pagination>
<!-- Paging end-->
</div>
This paragraph is the form of element, and the editing and paging style can be copied directly. Add some click operations and then we will start to introduce js
Those who have known vuejs should know this structure. data fills in the data we obtained, 1 some rules define 1 some variables
Do our work at methods
vm = new Vue({
el: '#user',
data:{},
methods:{}
})
First, let's start by reading the data
Put in your url
users is a table-bound array that also holds data fetched from the background
Put the data to be displayed in filter
vm = new Vue({
el: '#user',
// Data model
data: function() {
return {
url: 'url',
users: [],
filter: {
per_page: 10, // Page size
page: 1, // Current page
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
};
},
methods:{}
})
Next, we add methods
pageSizeChange () and pageCurrentChange () are functions for paging
In query () is the item used for search
getUsers () is used to get data
methods: {
pageSizeChange(val) {
this.filter.per_page = val;
this.getUsers();
},
pageCurrentChange(val) {
this.filter.page = val;
this.getUsers();
},
query(){
this.filter.name='';
this.filter.username='';
this.filter.phone='';
this.filter[this.select]=this.keywords;
this.getUsers();
},
// Get a list of users
getUsers() {
this.loading = true;
var resource = this.$resource(this.url);
resource.query(this.filter)
.then((response) => {
this.users = response.data.datas;
this.total_rows = response.data.total_rows;
this.loading = false;
})
.catch((response)=> {
this.$message.error(' Wrong oh, this is 1 Error message ');
this.loading = false;
});
},
}
After reading the data, we can see that the data is displayed according to 10 items per page, which is our default setting above
Delete the following deletion operation. What I set is one-on-one deletion and multiple deletions
Because deletion needs to be selected, we need to add the selected variables
vm = new Vue({
el: '#user',
// Data model
data: function() {
return {
url: 'http://172.10.0.201/api/v1/accounts',
users: [
],
filter: {
per_page: 10, // Page size
page: 1, // Current page
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
selected: [], // Selected item
};
},
Then add the selected function in methods
tableSelectionChange(val) {
console.log(val);
this.selected = val;
},
// Delete a single user
removeUser(user) {
this.$confirm(' This action will permanently delete the user ' + user.username + ', Do you want to continue ?', ' Prompt ', { type: 'warning' })
.then(() => { // Delete to the request server
var resource = this.$resource(this.url + "{/id}");
resource.delete({ id: user.id })
.then((response) => {
this.$message.success(' The user was successfully deleted ' + user.username + '!'); this.getUsers(); })
.catch((response) => {
this.$message.error(' Delete failed !');
});
}) .catch(() => {
this.$message.info(' Operation canceled !');
});
},
// Delete multiple users
removeUsers() {
this.$confirm(' This action will permanently delete ' + this.selected.length + ' Users , Do you want to continue ?', ' Prompt ', { type: 'warning' })
.then(() => {
console.log(this.selected);
var ids = []; // Object for the selected item id
$.each(this.selected,(i, user)=> { ids.push(user.id); }); // Delete to the request server var resource = this.$resource(this.url);
resource.remove({ids: ids.join(",")
}) .then((response) => {
.catch((response) => {
this.$message.error(' Delete failed !');
});
})
.catch(() => {
});
}
The next step is to edit and add
Added form due to deletion and editing
<!-- Create a user begin-->
<el-dialog title=" Create a user " v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
<el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
<el-form-item label=" User name " prop="username">
<el-input v-model="create.username"></el-input>
</el-form-item>
<el-form-item label=" Name " prop="name">
<el-input v-model="create.name"></el-input>
</el-form-item>
<el-form-item label=" Password " prop="password">
<el-input v-model="create.password" type="password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label=" Confirm password " prop="checkpass">
<el-input v-model="create.checkpass" type="password"></el-input>
</el-form-item>
<el-form-item label=" Telephone " prop="phone">
<el-input v-model="create.phone"></el-input>
</el-form-item>
<el-form-item label=" Mailbox " prop="email">
<el-input v-model="create.email"></el-input>
</el-form-item>
<el-form-item label=" Enable or not ">
<el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogCreateVisible = false"> Take Elimination </el-button>
<el-button type="primary" :loading="createLoading" @click="createUser"> Indeed Fixed </el-button>
</div>
</el-dialog>
<!-- Modify user begin-->
<el-dialog title=" Modify user information " v-model="dialogUpdateVisible" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
<el-form-item label=" Name " prop="name">
<el-input v-model="update.name"></el-input>
</el-form-item>
<el-form-item label=" Telephone " prop="phone">
<el-input v-model="update.phone"></el-input>
</el-form-item>
<el-form-item label=" Mailbox " prop="email">
<el-input v-model="update.email"></el-input>
</el-form-item>
<el-form-item label=" Enable or not ">
<el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogUpdateVisible = false"> Take Elimination </el-button>
<el-button type="primary" :loading="updateLoading" @click="updateUser"> Indeed Fixed </el-button>
</div>
</el-dialog>
We need to add form validation because there is a form
And add and edit pop-up status
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>Add and edit functions below
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>
This is the whole process of adding, deleting, revising and checking
demo Address: http://xiazai.ofstack.com/201701/yuanma/vuejs-element_jb51. rar