iview Table列表中增加字体图标

简介: iview Table列表中增加字体图标

iview Table列表中增加字体图标


image.png

一:

{
          'title': this.$t('设备别名'),
          'key': 'actStatus',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'ios-create-outline'
                },
                style: {
                  color: '#4071FF'
                },
                on: {
                  click: () => {
                    console.log('23')
                  }
                }
              }),
              h('span', params.row.actStatus)
            ])
          }
        },

二: 通过伪元素

 {
          'title': this.$t('设备别名'),
          'key': 'actStatus',
          render: (h, params) => {
            return h('span', {
              class: 'otherName',
              on: {
                click: () => {
                  console.log('点击')
                }
              }
            }, params.row.actStatus)
          }
        },
  .otherName {
    position: relative;
  }
   /deep/.otherName::after {
          content: '\F1A2';
          font-family: Ionicons;
          font-size: 16px;
          width: 0;
          height: 0;
          position: absolute;
          color: #2D8CF0;
  }


image.png

相关文章
|
9月前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
825 1
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
Web App开发 前端开发 iOS开发
Element-ui中 表格 (Table)组件中滚动条样式修改
Element-ui中 表格 (Table)组件中滚动条样式修改
1457 0
Element-ui中 表格 (Table)组件中滚动条样式修改
|
小程序 前端开发 JavaScript
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
|
JavaScript
VUE element-ui之table表格表头下拉筛选功能
VUE element-ui之table表格表头下拉筛选功能
1093 0
VUE element-ui之table表格表头下拉筛选功能
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
961 0
VUE element-ui之table表格内容样式(颜色)修改
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
1102 0
Element-ui 表格 (Table) 组件中动态合并单元格
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
134 1
|
9月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
JavaScript 开发工具 git
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
1392 0
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路

热门文章

最新文章