1、把底部按钮的默认 type 加上
<!--操作按钮--> <a-button-group> <a-button type="primary" >全部</a-button> <a-button type="default" >未完成</a-button> <a-button type="default" >已完成</a-button> </a-button-group>
2、给三个按钮都添加点击事件：
<!--操作按钮--> <a-button-group> <a-button type="primary" @click="changList(‘all‘)">全部</a-button> <a-button type="default" @click="changList(‘undone‘)">未完成</a-button> <a-button type="default" @click="changList(‘done‘)">已完成</a-button> </a-button-group> <script> import { mapState, mapGetters } from ‘vuex‘ export default { methods: { changList(e) { console.log(e) } } } </script>
这时点击全部按钮，控制台打印“all”；点击未完成按钮，控制台打印“undone”；点击已经完成按钮，控制台打印“done”。
3、在 store/index.js 文件的 state 中定义 viewKey：
state: { viewKey: ‘all‘ // 默认展示全部 }
4、把点击某个按钮的值赋值到 viewKey：
// 修改页面上展示的列表数据 changList(e) { console.log(e) this.$store.commit(‘changeViewKey‘, e) }
5、打开 store/index.js 中添加 changeViewKey：
mutations: { // 修改视图的关键字 changeViewKey(state, key) { state.viewKey = key } }
6、把全局的 viewKey 值映射为组件的计算属性：
// 计算属性 computed: { ...mapState([‘list‘, ‘inputValue‘, ‘viewKey‘]), },
7、根据 viewKey 的值，按需为底部按钮设置 type 值：
<!--操作按钮--> <a-button-group> <a-button :type="viewKey === ‘all‘ ?‘primary‘ : ‘default‘" @click="changList(‘all‘)">全部</a-button> <a-button :type="viewKey === ‘undone‘ ?‘primary‘ : ‘default‘" @click="changList(‘undone‘)">未完成</a-button> <a-button :type="viewKey === ‘done‘ ?‘primary‘ : ‘default‘" @click="changList(‘done‘)">已完成</a-button> </a-button-group>
ok，此时就实现了点击按钮实现高亮的效果。
原文：https://www.cnblogs.com/joe235/p/12744697.html