el-table表格列宽封装提取，使用mixins

说实话，我挺讨厌封装的，尤其之前在华为，要求一个函数只要使用两次都得封装出去。但是，这次，我切实体会到了不封装给我带来的痛处。

我们这个项目大概有13个表格，有的有“产品规格”列，有的有“分类数量”列，有的有“处理人”列，，有的无，而他们列宽又各不相同，要我改动几个列宽（比如改5个，5x13=65处，还得试，还容易漏，而且后面老板心情不好了还可能改回来），周五给我累的啊。

重点，他们每个列宽不一样，要封装出去，怎么做呢。

思路一，公共样式，不同的类名呗，提取出去，但是el-table的，好像应用上来没生效。（可能我没找到合适的写法，有知道的童鞋可以评论区or私信指教一下，有偿）

思路二，写成变量，不同的变量名，用mixins

话不多说，上代码

src>view>mixins>table>tableWidth.js

import { ref } from 'vue';
export default function(){
    let indexWidth = ref(80)
    let priceCodeWidth = ref(160)
    let useToWidth = ref(70)
    let projectCodeWidth = ref(150)
    ......
    return {
        indexWidth, // 序号宽度
        priceCodeWidth, // 报价单号宽度
        useToWidth, // 用途宽度
        projectCodeWidth, //项目编号宽度
        ......
    }
}

使用：

发现公司项目vue3用了两种setup写法，第一种<script setup>这样的使用：

第二种setup(){ 这样的使用：

你必须得return出去，重要的事情说一遍[/狗头][/狗头]。

细心的同学发现了align我也进行了封装，但是是页面级别的，而且vue3两种写法使用是不一样的。（<script setup>这样的带state.，setup(){}这样的不带state.）

ok，分享完毕。

后面就是雪，火锅，和更好的我们。加油，骚年~