How to implement the vue front-end information details page

This "vue front-end information details page how to achieve" article knowledge points most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "vue front-end information page how to achieve" article.

1.HTML section:

Upload file {{row.id}} {{row .name} Delete Block name add Delete new submission reset return

2.JS section:

Import waves from'@ / directive/waves' / / waves directive, click to produce water ripple effect, and add v-wavesimport Pagination from'@ / components/Pagination' / / paging component export default {data () {return {id:', options: [], guideFileIsChange:', guideFile: {file:', name:'}, listLoading: false, addBt: true Form: {model1:', model2:', model3: [], fileName:', tableList: [{id:', name:'', seen: false,}, {id:', name:', seen: false }] cards: [],},}, rules: {'model1': [{required: true, message:' please enter content'}], 'model2': [{required: true, message:' please select an option'}] 'model3': [{required: true, message: 'please select an option'}], 'fileName': [{required: true, message:' upload file'}],}, / / Page initialization created () {/ / get the parameters passed from the previous page Id, status, etc. This.id = this.$route.query.id this.action = this.$route.query.action}, methods: {/ / the jump returns the specified page goBack () {this.$store.state.tagsView.visitedViews.splice (this.$store.state.tagsView.visitedViews .findIndex (item = > item.path = this.$route.path) 1) this.$router.push ({path: 'page path to jump'})}, getOption () {/ / get the data of the dynamic option box const list = [] this.options = list}, / / upload file uploadSuccess (res) File) {this.guideFileIsChange ='1' this.guideFile.file = file.raw this.guideFile.name = file.raw.name this.form.fileName = file.raw.name}, / / Information of the experiment instruction beforeUpload (file) {setTimeout (()) > {this.$message ({duration: 1600, type: 'success' Message: 'file uploaded successfully!' })}) return true}, tableChange () {console.log ('action triggered by clicking on the table row')}, / / trigger the input box tableEdit (row.$index) Row) {for (const index in this.tableList) {if (row.id! = = this.tableList [index] .id) {this.tableList [index] .seen = false} else {this.tableList.seen = = false? Seen = false}} if (row.seen = true) {this.$nextTick (() = > {this.$refs.tableInput.focus ()}, 100)}}, delete (id) {this.$confirm ('confirm to delete this message?' , 'confirm deletion?' , {distinguishCancelAndClose: true, confirmButtonText:'OK', cancelButtonText: 'cancel'}) .then (() = > {for (let I = 0; I)

< this.tableList.length; i++) { if (id === this.tableList[i].id) { this.tableList.splice(i, 1) } } this.$message.success('删除成功！') }).catch(action =>

{})}, addCard () {this.cards.push ({key1: value1, key2: value2}) this.addBt = false}, deleteCard (card) {const index = this.cards.indexOf (card) if (index! = =-1) {this.cards.splice (index, 1)} if (this.cards.length = 0) {this.addBt = true}} Submit () {console.log ('submit!') }, reset (formName) {this.$ refs [formName] .fields ()},},}

3.css section:

/ / this is the modified read-only style of the input box. WhiteSelectBg. El-input.is-disabled. El-input__inner {background-color: white; color:#606266 } the above is the content of this article on "how to implement the vue front-end information details page". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.