Vue. js + Element enables addition, deletion, modification, and query in the Table. vue. jselement

Vue. js + Element enables addition, deletion, modification, and query in the Table. vue. jselement

The new project uses vue. js later found ELE. Me front-end programming of a framework Element (http://element.eleme.io/#/zh-CN) to work with vue. js style Filling

I used angularjs before. Later I found it increasingly difficult to learn, so I decided to use vue. js.

The following describes how to add, delete, modify, and query vue. js applications in the table.

First introduce element js

<script src="plugins/element-ui/index.js"></script>

Introduce the 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>

Next, let's talk about html files.

<Div id = "user"> <! -- Operation --> <ul class = "btn-edit fr"> <li> <el-button type = "primary" @ click = "dialogCreateVisible = true"> Add a 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 "> disable </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 = "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 = "username" width = "120"> </el- table-column> <el-table-column prop = "name" label = "name" w Idth = "120"> </el-table-column> <el-table-column prop = "phone" label = "Mobile phone"> </el-table-column> <el-table-column prop = "email" label = "email"> </el-table-column> <el-table-column prop = "create_time" sortable = "custom" inline-template label = "Registration Date" width = "260"> <div >{{ row. create_time | moment ('yyyy-MM-dd hh: mm: ss ')}} </div> </el-table-column> <el-table-column inline-template label = "operation" width = "250"> <el-butto N 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> <! -- Pagination 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> <! -- Pagination end --> </div>

This section is an element form, editing, and paging style. You can directly copy it and add some click operations to be used later. Then we will introduce js.

Those who have understood vuejs should know that such a structure data should be filled with the data we have obtained. Some rules should define some variables.

Perform operations on methods

 vm = new Vue({ el: '#user', data:{}, methods:{} })

First, we start by reading data.

Put your url

Users is an array bound to a table and stores data obtained from the background.

Put the data to be displayed in the filter.

Vm = new Vue ({el: '# user', // data model data: function () {return {url: 'url', users: [], filter: {per_page: 10, // page size: 1, // name: '', username:'', phone: '', is_active:'', sorts: ''}, total_rows: 0, loading: true, };}, methods :{}})

Next we will add methods

PageSizeChange () and pageCurrentChange () are functions used for paging.

Query () is a project used for search

GetUsers () is used to obtain 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 the user list 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 ('error, this is an error message'); this. loading = false ;});},}

After reading the data, we can see that the data is displayed according to ten entries per page, which is set by default above.

The following is the delete operation. I set single-click Delete and multiple delete operations.

Because deletion needs to be selected, we need to add the selected variable.

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: 1, // name of the current page :'', username: '', phone:'', is_active: '', sorts:''}, total_rows: 0, loading: true, selected: [], // selected items };},

Then add the selected function to methods.

 tableSelectionChange(val) { console.log(val); this.selected = val; },

// Delete a single user removeUser (user) {this. $ confirm ('this operation will permanently delete the user '+ user. username +', continue? ',' Hint ', {type: 'warning '}). then () => {// request the server to delete var resource = this. $ resource (this. url + "{/id}"); resource. delete ({id: user. id }). then (response) => {this. $ message. success ('user deleted successfully '+ user. username + '! '); This. getUsers () ;}). catch (response) =>{ this. $ message. error ('deletion failed! ') ;}). Catch () =>{ this. $ message.info (' operation canceled! ') ;}) ;}, // Delete multiple users removeUsers () {this. $ confirm ('this operation will be permanently deleted '+ this. selected. length + 'user, continue? ',' Hint ', {type: 'warning '}). then () => {console. log (this. selected); var ids = []; // extract the id of the selected item $. each (this. selected, (I, user) => {ids. push (user. id) ;}); // request the server to delete var resource = this. $ resource (this. url); resource. remove ({ids: ids. join (",")}). then (response) => {. catch (response) => {this. $ message. error ('deletion failed! ') ;}). Catch () => {});}

Click Edit and Add.

To delete and edit a form

<! -- Create user begin --> <el-dialog title = "" 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 = "username" prop = "username"> <el-input v -model = "create. username "> </el-input> </el-form-item> <el-form-item label =" name "prop =" name "> <el-input v- model = "c Reate. 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 =" phone "prop =" phone "> <el-input v-model = "create. phone "> </el-input> </el- M-item> <el-form-item label = "email" prop = "email"> <el-input v-model = "create. email "> </el-input> </el-form-item> <el-form-item label =" enable "> <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"> cancel </el-button> <el-button type = "primary ": loading = "createLoading" @ click = "CreateUser"> confirm </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 =" tel "prop =" phone "> <el-input v- model = "update. phone "> </el-input> </el-form-item> <el-form-item label =" email "prop =" email "> <el-input v- model = "update. email "> </el-input> </el-form-item> <el-form-item label =" enable "> <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"> cancel </el-button> <el-button type = "primary ": loading = "updateLoading" @ click = "updateUser"> confirm </el-button> </div> </el-dialog>

Because there is a form, we need to add form verification.

And add and edit the pop-up status.

Vm = new Vue ({el: '# user', // data model data: function () {var validatePass = (rule, value, callback) ==>{ if (value = '') {callback (new Error ('enter password again ');} else if (value! = This. create. password) {callback (new Error ('the two passwords are inconsistent! ') ;}Else {callback () ;}; return {url: 'http: // 172.10.0.201/api/v1/accounts', users: [], create: {id: '', username:'', name: '', password:'', checkpass: '', phone:'', email: '', is_active: true}, currentId: '', update: {name:'', phone: '', email:'', is_active: true}, rules: {name: [{required: true, message: 'Enter the name', trigger: 'blur'}, {min: 3, max: 15, message: 'length between 3 and 15 characters'}], username: [{required: true, message: 'enter username', trigger: 'blur'}, {min: 3, max: 25, message: 'length between 3 to 25 characters'}, {pattern:/^ [A-Za-z0-9] + $/, message: 'user name can only be letters and number'}], password: [{required: true, message: 'enter password', trigger: 'blur'}, {min: 6, max: 25, message: 'length between 6 to 25 characters'}], checkpass: [{required: true, message: 'enter password again ', trigger: 'blur'}, {validator: validatePass}], email: [{type: 'email ', message: 'incorrect email format'}], phone: [{pattern: /^ 1 [34578] \ d {9} $/, message: 'enter a Chinese mobile phone number '}]}, updateRules: {name: [{required: true, message: 'enter your name', trigger: 'blur'}, {min: 3, max: 15, message: '3 to 15 characters'}], email: [{type: 'email ', message: 'incorrect email format'}], phone: [{pattern:/^ 1 [34578] \ d {9} $ /, message: 'Enter the Chinese mobile phone number in China '}]}, filter: {per_page: 10, // page size: 1, // current page name :'', username: '', phone:'', is_active: '', sorts:''}, total_rows: 0, loading: true, selected: [], // selected items: dialogCreateVisible: false, // The display status of the create dialog box is dialogUpdateVisible: false, // The display status of the edit dialog box is createLoading: false, updateLoading: false ,};},

Add and edit functions below

Methods: {tableSelectionChange (val) {console. log (val); this. selected = val;}, pageSizeChange (val) {console. log ('every page $ {val} '); this. filter. per_page = val; this. getUsers () ;}, pageCurrentChange (val) {console. log ('current page: $ {val} '); this. filter. page = val; this. getUsers () ;}, setCurrent (user) {this. currentId = user. id; this. update. name = user. name; this. update. phone = user. phone; this. update. email = user. em Ail; this. update. is_active = user. is_active; this. dialogUpdateVisible = true;}, // reset the form reset () {this. $ refs. create. resetFields ();}, query () {this. filter. name = ''; this. filter. username = ''; this. filter. phone = ''; this. filter [this. select] = this. keywords; this. getUsers () ;}, // get the user list 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 ('error, this is an error message'); this. loading = false;}) ;}, // create user createUser () {// actively checks this. $ refs. create. validate (valid) =>{ if (valid) {this. create. id = getuuid (); this. createLoading = true; var resource = this. $ resource (this. url); resource. save (this. create ). th En (response) =>{ this. $ message. success ('user created successfully! '); This. dialogCreateVisible = false; this. createLoading = false; this. reset (); this. getUsers ();}). catch (response) => {var data = response. data; if (data instanceof Array) {this. $ message. error (data [0] ["message"]);} else if (data instanceof Object) {this. $ message. error (data ["message"]);} this. createLoading = false;});} else {// this. $ message. error ('input validation error! '); Return false ;}}) ;}, // update user information updateUser () {this. $ refs. update. validate (valid) =>{ if (valid) {this. updateLoading = true; var actions = {update: {method: 'patch '} var resource = this. $ resource (this. url, {}, actions); resource. update ({"ids": this. currentId}, this. update ). then (response) => {this. $ message. success ('user information modified successfully! '); This. dialogUpdateVisible = false; this. updateLoading = false; // this. reset (); this. getUsers ();}). catch (response) => {var data = response. data; console. log (data); if (data instanceof Array) {this. $ message. error (data [0] ["message"]);} else if (data instanceof Object) {this. $ message. error (data ["message"]);} this. updateLoading = false;});} else {// this. $ message. error ('input validation error! '); Return false ;}}) ;}, // delete a single user removeUser (user) {this. $ confirm ('this operation will permanently delete the user '+ user. username + ', continue? ',' Hint ', {type: 'warning '}). then () => {// request the server to delete var resource = this. $ resource (this. url + "{/id}"); resource. delete ({id: user. id }). then (response) => {this. $ message. success ('user deleted successfully '+ user. username + '! '); This. getUsers () ;}). catch (response) =>{ this. $ message. error ('deletion failed! ') ;}). Catch () =>{ this. $ message.info (' operation canceled! ') ;}) ;}, // Delete multiple users removeUsers () {this. $ confirm ('this operation will be permanently deleted '+ this. selected. length + 'user, continue? ',' Hint ', {type: 'warning '}). then () => {console. log (this. selected); var ids = []; // extract the id of the selected item $. each (this. selected, (I, user) => {ids. push (user. id) ;}); // request the server to delete var resource = this. $ resource (this. url); resource. remove ({ids: ids. join (",")}). then (response) => {this. $ message. success ('deleted '+ this. selected. length + 'user! '); This. getUsers () ;}). catch (response) =>{ this. $ message. error ('deletion failed! ') ;}). Catch () =>{ this. $ Message (' operation canceled! ');});}}

This is the process of adding, deleting, modifying, and querying.

Demo address: http://xiazai.jb51.net/201701/yuanma/vuejs-element_jb51.rar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.