想必大家都有过这样的经历 页面会有许多按钮 然后这些按钮需要通过一些后端返回的字段来做显隐藏
第一种做法：平铺到页面上 挨个判断 类似下面这样
<!-- 初号机 --> <button v-if="info.status ==='起草'" @click="submit">提交</button> <button v-if="info.status ==='起草'" @click="edit">编辑</button> <button v-if="info.status ==='起草'" @click="revoke">撤回</button> <button v-if="info.status === '审核'" @click="agree">提交</button> <button v-if="info.status === '审核'" @click="reject">驳回</button> <button v-if="info.status ==='起草' || info.status === '审核' || info.status === '签署'" @click="setWorker" >设置执行人</button> <button @click="goback">返回</button>现在看着还算工整 但一旦按钮多起来 判断多起来 然后整个页面就花了 人也就疯了 就算是加上注释 也于事无补 甚至注释也会变成一种负担
第二种：换汤不换药
<!-- 二号机 --> <template v-if="info.status ==='起草'"> <button @click="submit">提交</button> <button @click="edit">编辑</button> <button @click="revoke">撤回</button> <button @click="setWorker">设置执行人</button> </template> <template v-if="info.status === '审核'"> <button @click="agree">提交</button> <button @click="reject">驳回</button> <button @click="setWorker">设置执行人</button> </template> <template v-if="info.status === '签署'"> <button @click="setWorker">设置执行人</button> </template> <button @click="goback">返回</button>怎么说呢 就像if else换成了swich 也就是看着得劲了 糊弄糊弄自己罢了
第三种：策略模式
<!-- 三号机 --> <template v-for="(val, key) in buttons"> <button :key="key" @click="val.fn">{{val.text}}</button> </template> <button @click="goback">返回</button> computed: { buttons() { const _this = this; const { status } = this.info; const qc = "起草"; const sh = "审核"; const qs = "签署"; const buttonPermissions = { [qc]: { submit: { text: "提交", fn: _this.submit }, edit: { text: "编辑", fn: _this.edit }, revoke: { text: "撤回", fn: _this.revoke }, setWorker: { text: "设置执行人", fn: _this.setWorker } }, [sh]: { agree: { text: "提交", fn: _this.agree }, reject: { text: "驳回", fn: _this.reject }, setWorker: { text: "设置执行人", fn: _this.setWorker } }, [qs]: { setWorker: { text: "设置执行人", fn: _this.setWorker } } }; return buttonPermissions[status] || {}; } },这样做是不是就好了很多 把逻辑从页面里抽出来 放在js里 这样页面也变的清晰了 逻辑也统一到了一块 维护起来也方便了很多
对了 这里顺便感谢一个我楠哥（后端）
哈哈