接到这个需求的时候我一度非常迷茫，难道要当牛马吗？一路将屎山铲平吗？
可恶，我不甘心，士可杀、不可辱。
我怀着沉重的心情开启了今天的代码之路，改了两个，衍生出了两个问题
- 要是按钮样式全部改了领导看久了觉得不好看又要改回来怎么办？
- 改了按钮样式，之前的表格宽度是不是不适用了，该怎么解决？
按钮样式改变解决
-
方案1-分支
实现思路：拉取出2个分支打上对应标签单独来切换按钮样式
结果：当然这个方案被否决了，以防切换分支会出现代码冲突问题，不太适用
-
方案2-封装组件
实现思路：我们团队表格大部分增删改查按钮是使用公共组件进行编码的，那么我们只需要基于现有的组件进行扩展将他们的type统一拦截修改，哪些没有使用我们的按钮进行编码的页面，我们只需要将这个组件套上便可以统一拦截修改组件属性
存在问题：多种写法，多新员工不友好。统一拦截修改就意味着后面编写的页面可以不填写type...这些属性，那么这样我们进行按钮切换的时候便使有些页面毁掉
结果： 采用此方案，没有别的原因就是方便，哈哈哈，这些问题先抛掉
// 拦截代码
// 父组件
<renderBtn :slotList="$slots.button"></renderBtn>
// 子组件
export default {
name: "renderBtn",
props: {
slotList: {},
},
render(h) {
return h(
"div",
null,
this.slotList.map((v) => {
if (!v?.componentOptions?.propsData) return h(null)
v.componentOptions.propsData.type = "text";
v.componentOptions.propsData.plain = false;
v.componentOptions.propsData.icon = "";
return h("div", { class: "btn_father" }, [v]);
})
);
},
};
表格宽度解决方案
没有太好的解决方案，目前是采用全局变量混入，让后手动把所有页面的按钮宽度进行修改
兄弟们以后写代码的时候最好常用的组件进行二次封装，包裹一下，不然就会和我一样，闷着头改200多个页面，血淋淋的教训，加油吧，继续努力学习！
这是我目前能想到最好的实现方案，如果有更好的，欢迎大佬在评论区提出
