前言 好长时间没更新了,最近这段时间状态不佳,感觉整个人的精神状态不太好,总是回想起以前的某个人。。。 好了,废话不多说了;今天我遇到一个有趣的 如题 table 表格" />
  • 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

elementUI table 表格 column 样式

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4759.html 1190000019641056nd">

前言

好长时间没更新了,最近这段时间状态不佳,感觉整个人的精神状态不太好,总是回想起以前的某个人。。。

好了,废话不多说了;今天我遇到一个有趣的 如题 table 表格的样式显示问题,然后我 google 了半天,发现别人写的都是 table 表头等这些不着边际的问题,与我的目的相差甚远,然后只好自己思考着怎么写了,下面看具体要求吧

功能

截图如下:

图片描述

要达到的要求:根据状态那一列的数据(未到账,已取消,已到账)显示相应的颜色标识,并且只有在 状态那一列是 未到账 状态时,操作才会显示 到账,最终显示呢,如上图所示。

实现

其实,实现相对来说很简单,亮点在于 elementui 对于 table 每一行数据的处理上

实现代码如下:

<!-- table 数据 start -->
    <el-table ref="multipleTable" :data="orderList" v-loading="listLoading" element-loading-text="拼命加载中" border
              style="width:100%;" height="536" highlight-current-row @selection-change="chooseSelectionChange" :default-sort = "{prop: 'order_time', order: 'descending'}">
      <el-table-column fixed type="selection" align="center" width="50"></el-table-column>
      <el-table-column prop="order_time" align="center" label="下单时间" show-overflow-tooltip min-width="140" sortable></el-table-column>
      <el-table-column prop="type_name" align="center" label="状态" show-overflow-tooltip min-width="140">
        <template slot-scope="scope">
          <span  v-if="scope.row.type_name == '未到账'" style="color:black;">未到账</span>
          <span  v-if="scope.row.type_name == '已到账'" style="color:rgb(84, 195, 29);">已到账</span>
          <span  v-if="scope.row.type_name == '已取消'" style="color:red;">已取消</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" show-overflow-tooltip min-width="140">
        <template slot-scope="scope">
          <span class="option-item option-edit" @click.stop="tableOption('到账', scope.$index, scope.row)" style="color: #54c31d;"
                v-show="getButtonPermit('sys:user:operate')" v-if="scope.row.type_name == '未到账'">到账</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- table 数据 end -->

解释:

在 elementui 的 table 中,如果我们想对每一行数据作相应的渲染时,我们可以在 目标列(即 el-table-column)中加入 <template slot-scope="scope">...</template> 这一部分代码即可,这样,我们就可取到该 table 的该行数据项,然后根据该行就可以拿到你想要的目标列(即,此处的 scope.row.type_name),这样你就可以添加你自己的逻辑处理了。所以我们只需要记住,之后你想要拿某一列,某一行的数据,只需要通过 该种方法即可拿到喽。

声明

原创手敲不易,转载请注明出处,谢谢。我是拉丁小毛,欢迎大家关注我哦,一起交流,共同进步。有问题可以邮我哦(util.you.com@gmail.com)

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!