iView-Admin 在table单元格内显示常用组件记录

iView-Admin 在table单元格内显示常用组件记录

在table单元格内显示Tag

效果图: image.png

{
            title: '进行状态',
            key: 'aiStatus',
            align: 'center',
            width: '120px',
            render: (h, params) => {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      color: params.row.aiStatus === "Y" ? "purple" : "blue"
                    }
                  },
                  params.row.aiStatus === "Y" ? "进行中" : "已结束"
                )
              ]);
            }
          }

在table单元格内显示Img

{
            title: '单位LOGO',
            key: 'aiLogo',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.aiLogo
                  },
                  style: {
                    width: '80px',
                    height: '40px'
                  },
                  on: {
                    click: () => {
               		//点击图片的事件
                    }
                  }
                }),
              ]);
            }
          }

在table单元格内显示Poptip(删除按钮提示框)

{
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {

                    }
                  }
                }, '编辑'),
                h('Poptip', {
                  props: {
                    //这个参数很重要,影响到是否被遮挡的问题
                    transfer: true,
                    // placement: 'bottom',
                    confirm: true,
                    title: '你确定要删除数据吗?'
                  },
                  on: {
                    'on-ok': () => {
                      //调用删除接口
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ]);
            }
          }

在table单元格内显示Switch按钮

{
	title: '用户状态',
	key: 'locked',
	sortable: true,
	render: (h, params) => {
		//根据每个人的状态设置开关状态
		if (params.row.locked == 0) {
			this.islocked = true;
		} else {
			this.islocked = false;
		}
		return h('div', [
			h('i-switch', {
				props: {
					value: this.islocked,
					size: 'large'
				},
				on: {	
					'on-change': (status) => {
						//点击switch的点击事件
					}
				}
			})
		]);
	}
},
# Vue 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×