element-ui封装---tableList

最新推荐文章于 2024-09-03 16:56:52 发布

weixin_34250434

最新推荐文章于 2024-09-03 16:56:52 发布

阅读量998

点赞数

文章标签： javascript ui 前端 ViewUI

原文链接：https://my.oschina.net/u/3883810/blog/3060184

版权

本文主要介绍在使用Element-UI进行前端开发时，如何封装table组件，并针对每行数据实现动态操作栏，遇到的问题及代码展示。目前在处理根据行数据控制操作栏显示时遇到困难，期待得到社区大佬的指导。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

重头戏，table

里面也是借鉴了大佬的封装思路，但是还是有点小问题，还没啥思路，就是表格中，操作栏操作项，如何根据每行的数据控制。有点蒙圈。还望有大佬指教。上代码：

<template>
    <div id="tableList">
        <el-table :data="tableData"
                  size="medium"
                  @cell-click="cellClick"
                  @row-click="rowClick"
                  :header-cell-style="{background:'#409EFF',color:'#fff'}"
                  border
                  fit
                  stripe>
            <!-- 是否多选 -->
            <el-table-column type="selection"
                             v-if="options.mutiSelect"></el-table-column>
            <!-- 是否展示序列号 -->
            <el-table-column type="index"
                             v-if="options.isindex"
                             :index="indexMethod"></el-table-column>
            <template v-for="(v,k) in headerData">
                <!-- 常规列数据 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="!v.type"
                                 :key="`v.label${k}`"
                                 :formatter="v.format"
                                 :prop="v.prop">
                </el-table-column>
                <!-- 图片数据列 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="v.type=='image'"
                                 :key="`v.label${k}`">
                    <template slot-scope="scope"
                              :formatter="v.format">
                        <img class="cell-img"
                             :src="scope.row[v.prop]"
                             :formatter="v.format"
                             alt="">
                    </template>
                </el-table-column>
                <!-- 处理type=operation，自定义按钮 -->
                <el-table-column :label="