需求源源不断,代码越写越乱小菜鸡成长日记
最近参与到公司的项目中啦~遇到了几个需求,本篇主要谈的是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)