自适应文章网站模板,寻找好项目网,公众平台微信登录,电商模板免费下载文章目录 配置数据基础分析封装 el-table-column使用插槽强化结语 相信 element-ui 大家都有所耳闻#xff0c;table 也是老朋友了#xff0c;不过在使用它的时候大家是怎么使用的呢#xff1f;是直接在官网上cv使用吗#xff1f;这种方式#xff0c;我相信写起来会有点小… 文章目录 配置数据基础分析封装 el-table-column使用插槽强化结语 相信 element-ui 大家都有所耳闻table 也是老朋友了不过在使用它的时候大家是怎么使用的呢是直接在官网上cv使用吗这种方式我相信写起来会有点小难受反正我感觉要是一共表格就cv一次对于我来说是有点难受的但是如果这个 table 表格可以通过一个 json 这种类似的格式进行配置会不会方便很多呢 配置数据基础分析 直接复制官网的案例使用 table 组件会让我们页面的代码增加不说还会变得不是那么好维护每次增加删除或者修改都需要在结构里面去找而且这种看起来差不多的配置肯定是能动态生成的话就动态生成毕竟都是 “懒人” 开头提到过通过 json 配置生成那应该怎么确定这个 json 配置呢我们不妨写看看官网的案例示例代码如图 可以看到其实一个列需要的基础属性是 prop 和 labelprop 实现数据的填充label 就负责表头的显示所以我们配置的数据只收应该具备什么是不是 prop 和 label 呢所以我们可以写出一个基础的配置数据如下 const tableColConfig [{ prop: date, label: 日期 },{ prop: name, label: 姓名 },{ prop: address, label: 地址 }
]这个数据只是最基础的后续讲解会继续扩展
封装 el-table-column 有了数据之后我们应该怎么封装才能通过数据动态生成呢像这种渲染结构我们首先想到的必然就是 v-for也确实如此所以我们先创建一个 vue 文件来进行封装如下 templateel-table:borderborder:datatableData!-- 通过 tableColConfig 进行循环渲染 --el-table-columnv-foritem in tableColConfig:keyitem.prop:propitem.prop:labelitem.label/el-table-column/el-table
/templatescript
export default {props: {// 实际显示的表格数据tableData: {type: Array,default: () []},// 配置表格的数据tableColConfig: {type: Array,default: () []},// 是否显示边框border: {type: Boolean,default: true}}
}
/scriptstyle scoped/style有没有发现我这里多写了一个 border 属性呢这个属性是来控制 el-table 组件是否展示边框的有这个配置项的话那我们的配置文件也需要响应的增加一下如下 // 表格列配置
const tableColConfig [{ prop: date, label: 日期 },{ prop: name, label: 姓名 },{ prop: address, label: 地址 }
]export default {tableColConfig,border: true
}看起来是不是感觉非常简单呢那封装好了这个组件之后我们还需要实际的来使用一下如下 templatediv classcontainerdiv classtable-box!-- v-bind 可以批量绑定属性 --JcTable:tableDatatableDatav-bindtableConfig/JcTable/div/div
/templatescript
import JcTable from /components/JcTable/index.vue
import tableConfig from /config/table.configexport default {components: { JcTable },data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}],tableConfig}}
}
/scriptstyle scoped
.container {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}.table-box {width: 50%;height: 400px;
}
/style关于这个 v-bind 这里不做赘述了有兴趣的大家可以自行点击跳转到文档查看 写了这么多也到了看一眼效果的时候了也不能光画饼不给吃是不如图 当我们进行了一次封装之后后续使用这个表格组件就变得非常的简单了
使用插槽强化 上面实现了一个基础的使用但是很明显无法满足我们常规的开发需求这样封装之后我如果需要再每行加一个按钮呢或者我需要单独给某一列添加其他dom呢这些应该怎么解决比如在官网中的案例效果如图 这种情况在开发中使用 el-table 是非常常见的而让一个组件在某个位置可以让我们自由编辑替换大家想到了什么是不是插槽呢就是插槽了关于插槽这里也不做赘述了而这么多列我应该怎么才能让我的内容放入到指定的位置中呢一一对应不难想到具名插槽 现在我们已经知道可以通过具名插槽来解决这个问题了应该如何在渲染的列的时候动态的添加在我们封装的组件中呢这时候最开始的配置已经无法满足我们的需求了还需要一个属性 slotName当配置的数据中存在 slotName 时就使用具名插槽插槽的名字就是 slotName属性的值修改的数据如下 const tableColConfig [{ prop: date, label: 日期 },{ prop: name, label: 姓名, slotName: name },{ prop: address, label: 地址 },{ prop: operate, label: 地址, slotName: operate }
]在修改封装的组件前我们不妨先看看再案例中是如何修改这部分的如下 可以看到通过这种方式就可以从el-tale组件中获取到该列中每个单元格对应的值并且可以在这个范围内自定义的书写dom所以结合插槽我们就可以写出如下的代码 templateel-table:borderborder:datatableDatael-table-columnv-foritem in tableColConfig:keyitem.prop:propitem.prop:labelitem.label!-- 如果存在 slotName 属性则加入动态插槽 --template #defaultscopetemplate v-ifitem.slotNameslot:nameitem.slotName:rowscope.row/slot/templatetemplate v-elsespan{{ scope.row[item.prop] }}/span/template/template/el-table-column/el-table
/templatescript
export default {props: {// 实际显示的表格数据tableData: {type: Array,default: () []},// 配置表格的数据tableColConfig: {type: Array,default: () []},// 是否显示边框border: {type: Boolean,default: true}}
}
/scriptstyle langless scoped/style只是增加了一个if判断还是比较好理解的那么增加这个之后我们只需要按照正常使用插槽的方式使用即可如下 templatediv classcontainerdiv classtable-boxJcTable:tableDatatableDatav-bindtableConfig!-- 使用插槽 --template #name{ row }span stylecolor: #f40{{ row }}/span/templatetemplate #operateel-button typeprimary操作/el-button/template/JcTable/div/div
/template我们来看看现在显示效果如图 在页面的显示中我们已经可以拿到当前行的数据具体怎么使用那就是根据业务自己进行实现了
结语
使用插槽之后就已经可以满足日常的基本使用了如果你还需要其他的需求可以在此基础上进行扩展比如序列号勾选状态等等亦或者和其他组件配合再次封装为一个组件通过这种分层的思想可以解决很多业务的问题
