How to render different buttons according to field results in web development

This article mainly introduces how to render different buttons according to the field results in web development, which is very detailed and has a certain reference value. Friends who are interested must read it!

1. Update button data {{scope.row.is_monitored? based on a field of data. "remove Monitoring": "join Monitoring"}} View performance View status

If the value of scopy.row.is_monitored is "true", the type property of el-button is primary, otherwise it is success

If the value of scopy.row.is_monitored is "true", the value of el-button is to remove monitoring, otherwise the value is to join monitoring.

Optional js code

Const tmpText = row.is_monitored? "the host removes the monitoring queue, do you want to continue?": "the host joins the monitoring queue, do you want to continue?" This.$confirm (tmpText, 'prompt', {confirmButtonText:'OK', cancelButtonText: 'cancel', type: 'warning'}). Then () = > {axios.post (site_url + "host_view/", {"host_id": row.host_id "is_monitored": row.is_monitored}) .then (res = > {if (res.data.result) {if (row.is_monitored) {this.$message.success ('host removed monitoring queue successfully') } else {this.$message.warning ('host joined monitoring queue successfully');} this.getSearch ();} else {this.$message.error ('failed to update host monitoring status');}}, 'json') ). Catch (() = > {this.$message ({type: 'info', message:' update'});}); 2. Assign el-button to different type attributes to confirm completion depending on the field.

If the value of scopy.row.status is completed, the type property of el-button is empty, otherwise it is primary

If the value of scopy.row.status is "completed", the disabled property is bound for el-button, otherwise the disabled property is not bound

These are all the contents of the article "how to render different buttons according to field results in web development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!