表中添加相应颜色显示

是貔貅喔

已于 2023-02-09 13:43:17 修改

阅读量85

点赞数

文章标签：前端 css html

于 2022-12-23 10:13:59 首次发布

本文链接：https://blog.csdn.net/weixin_46087919/article/details/128416456

版权

表中添加相应颜色显示

标题：直接看代码吧

这个是另外一张加粗样式

表的颜色显示与添加
在这里插入图片描述
这个是另外一行表所展示的下拉属性

 <el-table-column prop="flightColor" label="班次颜色" align="center" :show-overflow-tooltip="true"    >
         <template  slot-scope="scope" >
          <div  class="flicolor"  :style="{background: scope.row['flightColor']}"      >
          </div>
         </template>
      </el-table-column>
<style>
.flicolor{
   width:25px ;
   height:25px ;
   display:flex;
   justify-content: center;
   margin-left: 82px;
}
</style>

<el-form :model="form"  @submit.native.prevent  ref="form" >
    <el-form-item label="班次编号" prop="flightNo"  >
          <el-select  placeholder="请选择安排的班次"  multiple v-model="form.flightNo" style="width: 10%"  > 
            <el-option v-for="item in flightList" :key="item.id" :value="item.flightCode"> <span :style="{color:item.flightColor}">{{item.flightName}}</span></el-option>
          </el-select>
          <el-button  type="primary" @click="handleAdd" >添加出勤</el-button>
    </el-form-item>   
        </el-form>
//修改
 <el-col :lg="12">
            <el-form-item label="班次颜色" prop="flightColor"     >
              <el-color-picker v-model="form.flightColor" show-alpha placeholder="请选择班次颜色"  size="30px"   />
            </el-form-item>
          </el-col>