这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
大家好，我是Ned👀，一个刚刚入门前端未满两年的大三小学生🌹, 未来路还长🎉, 一起努力加油吧❤~
前言
最近在写一个练手项目，接触到了一个问题，就是el-table中的项太多了，我写了一堆el-table-column，导致代码太长了，看起来特别费劲，后来发现了一个让人眼前一亮的方法，瞬间挽救了我的眼睛。
下面就来分享一下！
进入正题
上面就是table中的全部项，去除第一个复选框，最后一个操作的插槽，一共七项，也就是说
el-table-column一共要写9对。这简直不能忍！
这个图只作举一个例子用，跟上面不产生对应关系。
其中就有5个el-form-item，就这么一大堆。
所以，我当时就想，可不可以用v-for去渲染el-table-column这个标签呢？保留复选框和最后的操作插槽，我们只需要渲染中间的那几项就行。
经过我的实验，确实是可以实现的。
这么写之后就开始质疑之前的我为什么没有这个想法? 要不就能少写一堆💩啦 实现代码如下（标签部分）：
<el-table-column
v-for="item in columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:formatter="item.formatter"
:width="item.width">
</el-table-column>
思路是这样，把标签需要显示的定义在一个数组中，遍历数组来达到我们想要的效果，formatter是我们完成提交的数据和页面显示数据的一个转换所用到的。具体写法在下面js部分有写。
定义数组的写法是vue3 composition api的写法，这个思路的话，用Vue2的写法也能实现的，重要的毕竟是思想（啊，我之前还是想不到这种思路）。
再吐槽一下下，这种写法每写一个函数或者变量就要return回去，也挺麻烦的感觉，hhhhh
实现代码如下（JS部分）：
const columns = reactive([
{
label:'用户ID',
prop:'userId'
},
{
label:'用户名',
prop:'userName'
},
{
label:'用户邮箱',
prop:'userEmail'
},
{
label:'用户角色',
prop:'role',
formatter(row,column,value){
return {
0:"管理员",
1:"普通用户"
}[value]
}
},
{
label:'用户状态',
prop:'state',
formatter(row,column,value){
return {
1:"在职",
2:"离职",
3:"试用期"
}[value]
}
},
{
label:'注册时间',
prop:'createTime'
},
{
label:'最后登陆时间',
prop:'lastLoginTime'
}
])
写在最后
要一直在路上呀！ 一起努力加油吧❤
要期末考试了哇，不定期来掘金冒泡ing🐱🐉
