table 指定行设置样式

最新推荐文章于 2024-04-19 20:39:07 发布

猕猴桃-HR

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量879

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45677987/article/details/115697235

版权

vue 专栏收录该内容

105 篇文章

订阅专栏

1：可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

 tableRowClassName({row, rowIndex}) {
   if (rowIndex === 1) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
      return '';
  }

  tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    if ((rowIndex + 1) % 2 == 0) {
      return 'treven';
    } else {
      return 'trodd';
    }
   },

2：数据转化操作：

 if(res.status == 'success') {
   if (res.data && res.data.dataList) {
     let list = res.data.dataList;
     list.forEach(item => {
      let obj = {
       id: el.key,
       name: el.value,
      }

      this.OrderSplitList.push(obj);
    })
  }
  
 }else {
   this.$message({
     message: this.$t(`obj.`+ res.message),
     type: 'error'
   })

 }

3: 新增弹框数据显示：

// 每一行数据
<el-row>
   // 每一列数据(每一列数据宽度)
   <el-col :span="12">
     <el-form-item :lable="this.$t('标签名称')" prop="type">
       // 不是新增是则禁用
       <el-radio-group v-model="dataForm.type" :disabled="!ifAdd">
         <el-radio :label="item.id" v-for="item in OrderSplitList" :key="item.id">{{ 
           item.name }}</el-radio>
       </el-radio-group>
     <el-form-item>
   </el-col>
</el-row>