V3中使用JSX并且更换class类名

南丶方

于 2023-04-18 08:43:33 发布

阅读量238

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_65174477/article/details/130213089

版权

表格


render:({ row }) => {
            const slots = {
              reference: () => <div style="cursor: pointer ;">{row.signDateTime} </div>,     //默认插槽
            }
            const iconSlot = {
              icon: () => 
              <div>              
                <div  vShow={row.color == '#0c9ee8'} class="lanse" style="width: 4px;height: 4px;border-radius: 50%"></div>
                <div  vShow={row.color == '#000000'} class="heise" style="width: 4px;height: 4px;border-radius: 50%"></div>
                <div  vShow={row.color == '#ff3737'} class="hongse" style="width: 4px;height: 4px;border-radius: 50%"></div>
                <div  vShow={row.color == '#ff902f'}  class="chengse" style="width: 4px;height: 4px;border-radius: 50%"></div>
                <div  vShow={row.color == '#a6a6a6'} class="huise" style="width: 4px;height: 4px;border-radius: 50%"></div>
              </div>
            }
            return <div vShow={state.searchData.signFlag != '0'}>   //一个判断条件
                <el-popover vSlots={slots} onBeforeEnter={ () => {showStep(row)}} effect="light" trigger="hover" placement="left" width={200} active={1}>
                  <el-steps class={getClass(row)} direction="vertical"  space={60} >
                    {
                      state.signLogData.map((item) => (
                          <el-step vSlots={iconSlot} title={item.status} description={item.gmtCreate}/>
                      ))
                    }
                  </el-steps>
                </el-popover>
            </div>
          }



//通过判断更换class类名
const getClass = (row) =>{
      switch (row.color){
        // 蓝色待诊
        case "#0c9ee8":
          return "lanse";
         // 黑色待诊
        case "#000000":
          return "heise";
           // 红色待诊
        case "#ff3737":
          return "hongse";
           // 橙色待诊
        case "#ff902f":
          return "chengse";
           // 灰色待诊
        case "#a6a6a6":
          return "huise";
      }
    }

<style lang="scss" scoped>
</style>

<style lang="scss">
/* 蓝色 */
.lanse .el-step__icon {
  border: none !important;
}
.lanse .is-process .lanse {
  border-color: #0c9ee8 !important;
}
.lanse .el-step__line {
  width: 0 !important;
  border-left:  1px dashed #dfdfdf !important;
}
.lanse .is-process {
  color: #0c9ee8;
}
.lanse .el-step__description {
  color: #5e5e5e;
  font-size: 16px;
}



/* 黑色 */
.heise .el-step__icon {
  border: none !important;
}
.heise .is-process .heise {
  border-color: #000000 !important;
}

.heise .el-step__line {
  width: 0 !important;
  border-left:  1px dashed #dfdfdf !important;
}
.heise .is-process {
  color: #000000;
}
.heise .el-step__description {
  color: #5e5e5e;
  font-size: 16px;
}



/* 红色 */
.hongse .el-step__icon {
  border: none !important;
}
.hongse .is-process .hongse {
  border-color: #ff3737 !important;
}
.hongse .el-step__line {
  width: 0 !important;
  border-left:  1px dashed #dfdfdf !important;
}
.hongse .is-process {
  color: #ff3737;
}
.hongse .el-step__description {
  color: #5e5e5e;
  font-size: 16px;
}



/* 橙色 */
.chengse .el-step__icon {
  border: none !important;
}
.chengse .is-process .chengse {
      border-color: #ff902f !important;
}
.chengse .el-step__line {
  width: 0 !important;
  border-left:  1px dashed #dfdfdf !important;
}
.chengse .is-process {
  color: #ff902f;
}
.chengse .el-step__description {
  color: #5e5e5e;
  font-size: 16px;
}



/* 灰色 */
.huise .el-step__icon {
  border: none !important;
}
.huise .is-process .huise {
      border-color: #a6a6a6 !important;
}
.huise .el-step__line {
  width: 0 !important;
  border-left:  1px dashed #dfdfdf !important;
}
.huise .is-process {
  color: #a6a6a6;
}
.huise .el-step__description {
  color: #5e5e5e;
  font-size: 16px;
}
</style>