知道这个,再也不用写一堆el-table-column了

·  阅读 14674
知道这个,再也不用写一堆el-table-column了

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

大家好,我是Ned👀,一个刚刚入门前端未满两年的大三小学生🌹, 未来路还长🎉, 一起努力加油吧❤~

前言

最近在写一个练手项目,接触到了一个问题,就是el-table中的项太多了,我写了一堆el-table-column,导致代码太长了,看起来特别费劲,后来发现了一个让人眼前一亮的方法,瞬间挽救了我的眼睛。

下面就来分享一下!

进入正题

image.png 上面就是table中的全部项,去除第一个复选框,最后一个操作的插槽,一共七项,也就是说el-table-column一共要写9对。这简直不能忍!

image.png

这个图只作举一个例子用,跟上面不产生对应关系。

其中就有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🐱‍🐉

分类:
前端
标签:
分类:
前端
标签: