bootstrap-table 如何 formatter vue 自定义组件?

发布于 2022-09-11 20:26:10 字数 1137 浏览 11 评论 0

根据返回值渲染iview的组件

{
field: 'proprietary',
title: '私有状态',
sortable: 'true',
formatter: function (value, row, index) {

if (value) {
  return [
    '<a class="remove" href="javascript:void(0)" title="Remove">',
    '<i class="fa fa-trash"></i>',
    '</a>'
  ].join('')
} else {
  return [
    '<a class="like" href="javascript:void(0)" title="Like">',
    '<i class="fa fa-heart"></i>',
    '</a> '
  ].join('')
}

}
}

比如我想根据返回的 true/false 让开关显示 开/关状态 如何传值 之前使用的是 vue render 可以创建元素并往组件传参 bootstrap-table 这个formatter 该怎么处理(开关只是为了举例 实际项目有很多自定义组件)
render: (h, params) => {

return h('div', {
  style: {
    position: 'relative'
  }
}, [
  h('i-switch', {
    props: {
      size: 'small',
      value: params.row.proprietary
    }
  }),
  h('div', {
    style: {
      cursor: 'pointer',
      width: '40px',
      height: '20px',
      position: 'absolute',
      top: '0'
    },
    on: {
      click: () => {
        this.changeProprietary(params.row)
      }
    }
  })
])

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文