浅谈一下element-plus中的el-table组件的各种需求

620 阅读1分钟

需求源源不断,代码越写越乱小菜鸡成长日记

最近参与到公司的项目中啦~遇到了几个需求,本篇主要谈的是el-table组件。现在就一些简单的需求,后续遇到其他的会继续增加。

需求一:通过判断el-table-column的prop属性值来转换页面所要展示的值

一般写法:

<el-table-column label="数据接入" align="center" prop="isDataAccess" />

但是有些需求不是直接展示prop属性绑定的值,而是需要通过绑定的值来判断要显示什么文字。此处isDataAccess的值是0或1,0代表未接入,1代表已接入。所以我们可以加个插槽来判断。这是最新版vue3.0(#default)插槽写法,不用写prop。

<el-table-column label="数据接入" align="center">
  <template #default="scope: any">
     <el-tag v-if="scope.row.isDataAccess" class="ml-2" type="success">已接入</el-tag>
     <el-tag v-else class="ml-2" type="danger">未接入</el-tag>
  </template>
</el-table-column>

简简单单...

需求二:横向滚动,纵向滚动

这个也很简单,官方文档都有的,横向滚动给表头加fixed属性,纵向滚动给el-table加height属性,详情可看官方文档。

需求三:el-table展开行

设置el-table-column的type为expand,然后借助插槽插入子表格,注意:props.row读取的是父表格所绑定的数据。

//后端返回的数据
dataList{
    name:string,
    age:string,
    items:[
        {
            name:string,
            age:string,
        }
    ]
}
<el-table class="perfect-table" :data="dataList">
    <el-table-column type="expand">
      <template #default="props">
        <el-table class="perfect-table" :data="props.row.items" size="small">
          <el-table-column label="姓名" prop="name " />
          <el-table-column label="年龄" prop="age " />
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="姓名" prop="name " />
    <el-table-column label="年龄" prop="age " />
    
 </el-table>

需求四:el-table展开行的子表格无数据时不显示展开符

el-table展开行子表格无数据时隐藏展开符(vue3+ts) - 掘金 (juejin.cn)

需求五:给el-table的表头添加注释

element-plus中给el-table的表头上加注释 - 掘金 (juejin.cn)