在做项目的时候,会遇到很多问题,有的问题很小,只是以前没有接触,所以还是需要花时间寻找解决方法。最近,工作中有一个要求,一个按钮根据不同的要求,显示不同的值,要实现这个功能还是比较容易的。在这里将我自己的实现步骤记下来,以后再遇到,解决就方便了。具体情况还是要依据自己的项目来操作,有什么不足的地方,欢迎大家指出来。
<template> <div> <el-form ref="form" :model="form" label-width="150px"> <!-- 第一种情况 是同一个按钮根据不同的条件显示不同的按钮值 --> <el-row> <el-col :span="12"> <!-- el-input 有值的话 el-button显示查询; el-input 没有值的话 el-button显示输入 --> <el-form-item label="按钮名改变"> <el-input v-model="form.inputValue" :span="12"></el-input> </el-form-item> </el-col> <el-col :span="6"> <!-- 判断条件 showBtnContain --> <el-button type="primary" > {{ showBtnContain == true ? '查询' : '输入' }} </el-button> </el-col> </el-row> <!-- 第二种情况 是不同的按钮根据不同的条件显示 本文示例是两个按钮 --> <el-form-item> <!-- 这种方法 按钮要放在相同的域里面 本文是放在el-form-item里 --> <!-- 判断条件 isEdit --> <el-button v-if="isEdit" type="primary">显示按钮</el-button> <el-button v-else type="primary">隐藏按钮</el-button> </el-form-item> </el-form> </div> </template> <script> export default { name: 'btnChange', data() { return { //保存信息 form: {}, //显示按钮信息 showBtnContain: false, isEdit: false } }, created() { this.getList() }, methods: { getList() { this.form.inputValue = '按钮显示查询' if (this.inputValue !== undefined && this.inputValue !== null && this.inputValue !== '') { this.showBtnContain = true } } } } </script>