【vue】【element】el-table列表中设计一个颜色块

最新推荐文章于 2023-09-15 23:38:24 发布
最新推荐文章于 2023-09-15 23:38:24 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40690815/article/details/116892819
版权

【vue】【element】el-table列表中设计一个颜色块

使用style中的background加载对应颜色。

<el-table-column class="bj" prop="color" label="颜色" width="50">
  <template class="bj" slot-scope="scope" style="text-align:center">
    <div :style="{'background':scope.row.color}" style="width:10px;height:10px;margin: 0 auto"></div>
  </template>
</el-table-column>
StevenGerrad
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
049：vue+openlayers鼠标pointermove显示城市名片（示例代码）
大剑师兰特的GIS世界
08-14 1864
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
vue修改Element的el-table样式的4种方法
10-14
主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 element[email protected]，使用前请熟悉： element[email protected] element[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
wuyxinu的博客
06-08 5422
在一次开发任务中遭遇的一个问题 正常使用 element-ui的icon时 却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2 但是无法解决这个问题 失败Vue.config.js 配置问题 也就是 webpack的配置问题 通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...
删除数组中的负数，输出结果为正数
qq_45055426的博客
11-03 1726
#include<stdio.h> int main() { int i, j, n = 7, a[7] = { 1,-2,3,4,-5,6,-7 }; for (i = 0; i < n; i++) { if (a[i] < 0) { for (j = i--; j < n - 1; j++) { a[j] = a[j+1];//交换 ...
VUE学习02——色块的制作
最新发布
m0_73890688的博客
09-15 168
left: 0;top: 0;right: 0;bottom: 0;2.overflow：hidden（让父节点高度不受浮动影响，隐藏溢出部分）-- div 默认沾满整行，多个div 换行排列 -->-- 如果要一行排列，需要使用浮动 float，会脱离文档流 -->-- 样式可以重复使用，可以用空格隔开写多个样式一起用 -->
Vue中如何进行颜色选择与调色板
徐师兄的博客
06-15 4166
在Vue中进行颜色选择和调色板可以使用v-model指令、vue-color库和CSS变量等多种方法。无论使用哪种方法，都需要注意数据隐私和版权等相关问题。希望本文能够帮助读者了解如何在Vue中进行颜色选择和调色板。
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。 前端代码： scope.$index ：获取当前行的下标 ...实现思路在基于element-upload组件的基础上，再加一个按
表格某一列根据值不同，显示不同颜色vue
m0_68428581的博客
04-18 2114
status的值来自字典。
vue随机生成颜色块
qq_44741558的博客
04-28 709
vue随机生成颜色块： 下面展示一些 内联代码片。 // An highlighted block <div :style="{ 'background-color': randomColor(), 'width': '10px', 'height': '10px', 'border-radius': '5px 5px 5px 5px' }"/>
实现点击选择按钮时候选中对应选中的行，当点击某一行单元格时候就清除其他选中行然后选中对应点击的那一行
chendong0008的博客
05-20 2915
实现点击选择按钮时候选中多行，当点击某一行单元格时候就清除其他选中行 <el-table :data="data" showOverflowTooltip ref="multipleTable" @selection-change="handleSelectionChange" @row-click="rowClick" border style="width: 100%"> :data="data" ：绑定到后台数据中取得的值。 ref="multipleTabl...
前端三件套知识点
二氧化硅.的博客
01-11 2018
前端三件套知识点
vue项目中使用颜色选择器
热门推荐
maple_leaf_red的博客
08-21 1万+
颜色选择器引言type类型为color的inputelementUI中的ColorPicker组件vcolorpicker插件 引言 关于颜色选择器，我是用过三种，一个是HTML5新增的<input type="color">，一个是elementUI中的ColorPicker组件，一个是基于Vue的颜色选择器插件vcolorpicker type类型为color的input elementUI中的ColorPicker组件 vcolorpicker插件 ...
自己动手写一个基于Vue的颜色选择器（二）
maple_leaf_red的博客
09-25 2115
基于Vue的颜色选择器（二） —— 颜色选择器组件的搭建
VSCode中Vue项目的CSS出现两个颜色块
m0_68402487的博客
11-24 1630
用 Visual Studio Code 写过 Vue 项目的开发者们是不是都好奇有时候如下一样出现了两个颜色块？用 Vue3 可以开启 Volar，vue2 的话可以用 Vetur。
【前端】【element】el-progress组件使用文档补充——大小调整与数字颜色
qq_40690815的博客
08-23 5081
【前端】【element】el-progress组件使用文档补充——大小调整与数字颜色el-progress调整大小调整颜色 基础可参考官方文档：Progress 进度条 el-progress 调整大小 使用:width与:height调整大小 <el-progress type="circle" :width="45" :height="45" :percentage="percentage"></el-progress> 调整颜色 参考《ElementUI Progre
【cornerstoneTools】【vue】使用cornerstoneTools搭建标注系统相关代码
qq_40690815的博客
03-30 3943
使用cornerstoneTools搭建标注系统相关代码cornerstoneTools引入注册cornerstoneTools工具cornerstone 右键平移标注工具的切换初始化标注获取标注数据toolState使用橡皮擦Eraser后其他标注会暂时消失(remove事件)检测创建标注结束事件、修改标注事件 即使是Google上搜到的博客也是GitHub的issues，相关资料较少，文档也近似没有。 文档（太写意了，形散神也散） cornerstoneTools引入 import * as co
【vue】使用Promise方法保证按顺序执行
qq_40690815的博客
05-16 2847
【vue】使用Promise方法保证按顺序执行 使用Promise方法可以叠加.then方法，来保证执行顺序。 queryTasksNum(){ // TODO: 如果和queryImg都放在mounted里，会比后者执行得早 // 查询未标记数量、已标记数量、已复核数量 let that = this; var cntIm0 = 0; var cntIm1 = 0; var cntIm3 = 0; // TODO：如果是
vue - element 中 el-table自定义弹窗
06-06
在 Vue-Element 中，要自定义 el-table 的弹窗，你可以使用 scoped slot 的方式来实现。 具体步骤如下： 1. 在 el-table 中定义 scoped slot，例如： ```html <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> <el-table-column prop="actions" label="Actions"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)">Edit</el-button> <el-button @click="handleDelete(scope.row)">Delete</el-button> </template> </el-table-column> </el-table> ``` 2. 在 methods 中定义 handleClick 方法，例如： ```javascript methods: { handleClick(row) { this.dialogVisible = true; this.editRow = row; } } ``` 3. 在 el-dialog 中使用 editRow 数据来渲染自定义的弹窗： ```html <el-dialog :visible.sync="dialogVisible"> <el-form :model="editRow"> <el-form-item label="Name"> <el-input v-model="editRow.name"></el-input> </el-form-item> <el-form-item label="Gender"> <el-radio-group v-model="editRow.gender"> <el-radio :label="1">Male</el-radio> <el-radio :label="2">Female</el-radio> </el-radio-group> </el-form-item> </el-form> </el-dialog> ``` 这样，当用户点击 Edit 按钮时，就会弹出自定义的编辑弹窗，用户可以在弹窗中编辑数据，点击确认按钮后，数据会保存到 editRow 中，然后再自动更新到表格中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值