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

目录
打赏
0
0
0
0
0
分享
相关文章
Vue Antdv 列表(table、list)自定义空数据状态UI
Vue Antdv 列表(table、list)自定义空数据状态UI
880 0
VUE element-ui之table表格横向展示(表尾汇总)
VUE element-ui之table表格横向展示(表尾汇总)
1828 0
VUE element-ui之table表格横向展示(表尾汇总)
VUE element-ui之table表格自增序号(前端实现)
VUE element-ui之table表格自增序号(前端实现)
1829 0
|
10月前
|
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
954 1
|
10月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
521 1
element-ui可编辑行增加行或删除行
element-ui可编辑行增加行或删除行
110 0
js 选取table中checkbox选中行的某一列
js 选取table中checkbox选中行的某一列
134 0
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
529 0
vue2 el-select 改造成下拉树,支持数据回显
下拉树 就是一个下拉框里面的options里面换成一棵树的形状。本人业务需要一个这样的组件,我也懒得去发布一个组件到npm库,毕竟现在vue3出来了,这个组件只适合vue2 并且是element ui的基础,限制条件有点多。所以在这里做个笔记,有需要的自己copy 代码到自己本地,就行。
VUE element-ui之table表格分页完整功能
VUE element-ui之table表格分页完整功能
455 0
VUE element-ui之table表格分页完整功能