Vue 实现element 的 el-table 的表格类的样式绑定

导读:本篇文章讲解 Vue 实现element 的 el-table 的表格类的样式绑定,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

<template>
// 遍历表格
    <div class="dormitoryData">
      <el-table
        ref="dormitoryTable"
        :data="dormitory"
        tooltip-effect="dark"
        stripe
        style="width: 100%">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序号"  type="index" width="65"></el-table-column>
        <el-table-column label="人物" prop="people">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.people }}</div>
          </template>
        </el-table-column>
        <el-table-column label="关系" prop="relationship">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.relationship }}</div>
          </template>
        </el-table-column>
        <el-table-column label="初见" prop="meet">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.meet }}</div>
          </template>
        </el-table-column>
        <el-table-column label="地点" prop="place">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.place }}</div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="execg">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.execg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="认识年限" prop="year">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.year }}</div>
          </template>
        </el-table-column>
        <el-table-column label="成名之作" prop="works">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.works }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
 
  export default {
   
    data () {
      return {
        dormitory: [{
          people: '雷森',
          relationship: '大学室友',
          meet: '2010-09-02',
          place: '图书馆',
          execg: '胖子',
          year: '8年',
          works: '海阔天空',
          isEdit: '1'
        }, {
          people: '刘利伟',
          relationship: '大学室友',
          meet: '2010-09-02',
          place: '5#633',
          execg: '老大',
          year: '8年',
          works: '勇气',
          isEdit: '1'
        }, {
          people: '李金龙',
          relationship: '大学室友',
          meet: '2010-09-02',
          place: '5#633',
          execg: '二哥',
          year: '8年',
          works: '遇见',
          isEdit: '1'
        }, {
          people: '马康',
          relationship: '大学室友',
          meet: '2010-09-02',
          place: '餐饮大厦',
          execg: '康哥',
          year: '8年',
          works: '不再联系',
          isEdit: '1'
        }, {
          people: '牛光卫',
          relationship: '大学室友',
          meet: '2010-09-02',
          place: '图书馆',
          execg: '牛牛娃',
          year: '8年',
          works: '断点',
          isEdit: '1'
        }, {
          people: '陆兆攀',
          relationship: '大学室友',
          meet: '1991-07-27',
          place: '百浪',
          execg: '帅哥',
          year: '27年',
          works: '不再犹豫',
          isEdit: '0'
        }, {
          people: '小甜',
          relationship: '亲密的人',
          meet: '2016-10-05',
          place: '小寨',
          execg: '甜甜圈',
          year: '2年',
          works: 'Forever Love',
          isEdit: '0'
        }]
      }
    }
  }
</script>

<style lang="scss">
.one {
      background: #ff1493;
    }
</style>

 效果如下图所示,表格行的背景颜色会根据一行中的isEdit 这个值得属性改变

Vue 实现element 的 el-table 的表格类的样式绑定

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/66448.html

(0)
小半的头像小半

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!