iview-admin 在table单元格内显示组件小记

说明

表格内内嵌相关的组件标签一般是刚需的需求，如官网示例中的表格内内嵌Button的示例。

但是有些时候我们需要渲染其他复杂的组件的话，就需要深入了解一下相关render属性。

以下是部分的示例：

1.单元格内嵌图片展示：

image.png

  {
            title: 'bannel图',
            key: 'pic_bannel',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.pic_bannel
                  },
                  style: {
                    width: '40px',
                    height: '40px'
                  },
                  on: {
                    click: () => {
                      // this.userEdit(params.row)
                      this.modal_see_tupian_image = params.row.pic_bannel
                      this.modal_see_tupian = true
                    }
                  }
                }),
              ]);
            }
          }

2.单元格内嵌TAG标签：

image.png

 {
            title: '商品类型',
            key: 'type',
            align: 'center',
            width: 120,
            render: (h, params) => {
              let re = "";
              if (params.row.type === 0) {
                return h("div", [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "warning"
                      }
                    },
                    "虚拟物品"
                  )
                ]);
              } else if (params.row.type === 1) {
                return h("div", [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "success"
                      }
                    },
                    "实体物品"
                  )
                ]);
              }
            }
          },

优化判断逻辑：

 {
            title: '性别',
            key: 'sex',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      color: params.row.sex === "1" ? "purple" : "blue"
                    }
                  },
                  params.row.sex === "1" ? "男" : "女"
                )
              ]);
            }
          },

3.单元格内嵌Tooltip标签：

image.png

 {
            title: '商品描述',
            key: 'describe',
            align: 'center',
            width: 200,
            render: (h, params) => {
              return h('Tooltip', {
                props: {placement: 'bottom-end'}
              }, [
                params.row.describe,
                h('span', {slot: 'content', style: {whiteSpace: 'normal', wordBreak: 'break-all'}}, params.row.describe)
              ])
            }
          }

4.单元格内嵌Poptip标签：

image.png

 

//这个参数很重要，影响到是否被遮挡的问题
Poptip中的 transfer: true,

 {
            title: '操作',
            key: 'action',
            width: 200,
            // fixed: 'right',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                // h('Button', {
                //   props: {
                //     type: 'primary',
                //     size: 'small'
                //   },
                //   style: {
                //     marginRight: '5px'
                //   },
                //   on: {
                //     click: () => {
                //       // this.goodsInfoList[params.row._index] = dsiasdh
                //       // console.log(this.goodsInfoList[params.row._index])
                //       // this.currgoodsInfoList = params.row
                //       //显示对应的对话框
                //       // this.edit_goods_info_modal = true
                //     }
                //   }
                // }, '查看'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      // this.userEdit(params.row)
                      //赋值当前选择的实体对象
                      this.currgoodsInfoList = params.row
                      this.currgoodsInfoList_index = params.row._index
                      //拷贝一份对象，不影响原来的值
                      this.copy_currgoodsInfoList = Object.assign({}, params.row);

                      // this.currgoodsInfoList_is_enable = this.currgoodsInfoList.is_enable
                      // this.currgoodsInfoList_is_lower = this.currgoodsInfoList.is_lower
                      // this.currgoodsInfoList_type = this.currgoodsInfoList.type
                      // this.currgoodsInfoList_tag= this.currgoodsInfoList.tag


                      //显示对应的对话框
                      this.edit_goods_info_modal = true
                    }
                  }
                }, '修改'),
                //弹窗层-包含按钮
                h('Poptip', {
                  props: {
                    //这个参数很重要，影响到是否被遮挡的问题
                    transfer: true,
                    // placement: 'bottom',
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    'on-ok': () => {
                      console.log(" 点击了确定删除！！！！")
                      this.deleteGoodsinfo()
                      // vm.$emit('on-delete', params)
                      // vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        // this.deleteUser(params.row.USER_ID)
                      }
                    }
                  }, '删除')
                ])
              ]);
            }

5.单元格内嵌Avatar组件：

image.png

  {
            title: '用户头像',
            key: 'avatar_url',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h("Avatar", {
                props: {
                  src: params.row.avatar_url
                }
              });
            }
          }

6.单元格内嵌Switch组件：

image.png

代码还可以简化一下：
根据params.row.is_enable设置switch的值就可以！

  {
            title: '用户状态',
            key: 'is_enable',
            align: 'center',
            width: 190,
            render: (h, params) => {
              if (params.row.is_enable === 1) {
                return h("div", [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "green"
                      }
                    },
                    "正常中"
                  ),
                  h('i-switch', { //数据库1是已处理，0是未处理
                    props: {
                      size:'large',
                      type: 'primary',
                      value: false //控制开关的打开或关闭状态，官网文档属性是value
                    },
                    scopedSlots: {
                      open: () => h('span', '开启'),
                      close: () => h('span', '禁用'),
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                        //参数value是回调值，并没有使用到
                        // this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                        this.usersInfoList[params.index].is_enable = 0
                      }
                    }
                  },)
                ]);
              } else if (params.row.is_enable === 0) {
                return h("div", [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "red"
                      }
                    },
                    "已禁用"
                  ),
                  h('i-switch', { //数据库1是已处理，0是未处理
                    props: {
                      size:'large',
                      type: 'primary',
                      value: true
                    },
                    scopedSlots: {
                      open: () => h('span', '开启'),
                      close: () => h('span', '禁用'),
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                        //参数value是回调值，并没有使用到
                        // this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                        this.usersInfoList[params.index].is_enable = 1
                      }
                    }
                  },)
                ]);
              }

代码判断优化：

{
            title: '用户状态',
            key: 'is_enable',
            align: 'center',
            width: 190,
            render: (h, params) => {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      color: params.row.is_enable === 1 ? "green" : "red"
                    }
                  },
                  params.row.is_enable === 1 ? "正常中" : "已禁用"
                ),
                h('i-switch', { //数据库1是已处理，0是未处理
                  props: {
                    size: 'large',
                    type: 'primary',
                    value: params.row.is_enable === 1 ? false : true//控制开关的打开或关闭状态，官网文档属性是value
                  },
                  scopedSlots: {
                    open: () => h('span', '开启'),
                    close: () => h('span', '禁用'),
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                      //参数value是回调值，并没有使用到
                      // this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                      if (value) {
                        params.row.is_enable = 0
                      } else {
                        params.row.is_enable = 1
                      }
                    }
                  }
                },)
              ]);
            }
          },

作者：小钟钟同学
链接：https://www.jianshu.com/p/0760f6e57509
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。