首页 > 其他分享 >日常开发记录-elementUI表格特殊值标红,利用插槽,vue动态绑定类名

日常开发记录-elementUI表格特殊值标红,利用插槽,vue动态绑定类名

时间:2022-08-22 11:23:38浏览次数:80  
标签:city vue name zip 普陀区 elementUI 值标 2016 05

代码:

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
        <template slot-scope="{row}">
          <span :class="{active: row.name === '张三' ? true:false}">{{row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '张三',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>

 效果展示:

 

标签:city,vue,name,zip,普陀区,elementUI,值标,2016,05
From: https://www.cnblogs.com/huguo/p/16612196.html

相关文章

  • Vue面试题06:Vue子组件是否可以修改父组件的数据?
    Vue子组件是否可以修改父组件的数据?可以修改但不推荐:首先,文档中指出组件开发需要遵循单向数据流原则:即所有的props都遵循着单向绑定的原则,props因父组件的更新而变化......
  • vue 打包配置相对路径
    前言:临下班了产品找到我,要满足甲方爸爸需求「vue打包的静态资源需要相对路,绝对路径会报错」。时间紧,催的急(半小时问一次),导致我顾此失彼,配置好了这个没配好那个,所以借此反省......
  • vue3动态组件切换
    <template><divclass="goods-tabs"><nav><a@click='toggle("GoodsDetail")':class="{active:componentName==='GoodsDetail'}"href="javascript:;">商品详情</a>......
  • elementui步骤条页面开发案例
    <template><divid="bdy"><divclass="tbody"><el-steps:active="active"finish-status="success"><el-steptitle="创建项目"></el-step>......
  • vuex的引入
    官方文档可以解决一切问题。1、安装vuexnpminstallvuex@next--save如果版本和你的vue版本不符合,可以根据提示,在@后加上适合的版本号再安装。安装成功之后会在packjs......
  • vue中子组件修改父组件中传递的参数的值
    方法一:1<!--父组件代码-->2<template>3<div>4<p>我是父组件</p>5<button@click="handleShowChild"v-show="!isVisibleChild">显示子组件</but......
  • 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用
    组件之间的循环引用点击打开视频讲解更详细假设你需要构建一个文件目录树,像访达或资源管理器那样的。你可能有一个<tree-folder>组件,模板是这样的:<p><span>{{fold......
  • vue3项目-小兔鲜儿笔记-01-项目初始化
    1.pinia基础store/modules/user.tsimport{defineStore}from'pinia'//用户模块constuseUserStore=defineStore('user',{state:()=>{return{......
  • vue中的EL理解
    el的作用:用于指明Vue实例的挂载目标。那么什么是挂载?虚拟dom与真实dom建立关系,让Vue实例控制页面中的某个区域的过程,称之为挂载。挂载的方式有:1、通过“el:'css选择器......
  • vue中打包的时候,如何将console.log去掉
    问题:打包完成后,项目启动后还有打印语句?1.开发环境,生产环境,是2套不同的环境开发环境需要console.log使用生产环境不需console.log使用让一套代码,在2个环境自......