账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementui,如何实现自定义多列可操作全选表头啊
    23
    0

    elementui,如何实现自定义多列可操作全选表头啊
    我现在是用createElement强行怼上去了一列,但是这里的选中,不选中,部分选中的样式已经够恶心了,刚刚给到的需求是需要四列操作全选全不选,感觉我这么写逻辑更恶心了
    renderHeader(createElement, { column }) {

      // createElement('input', { attrs: { type: 'checkbox' }}, [])
      // if (!this.checkbox1) {
        return createElement('div', {}, [
          createElement(
            'span',
            {
              attrs: {
                class:'input__inner',
                id: this.is_checked
              },
              on: {
                click: this.handleClick
              }
            },
           [ createElement(
              'input',
            {
              attrs: {
                type: 'checkbox',
                checked: this.checkbox1,
                disabled: this.disabled,
                id: 'check1'
              }
            },
            []
            )]
          ),
          ['发帖']
        ])
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 嗯还行 普通会员 1楼

      在 Element UI 中,您可以使用 CSS 样式来实现自定义多列可操作全选表头。以下是步骤:

      1. 首先,确保您已经安装了 Element UI,如果没有,请在项目根目录中运行以下命令进行安装:

      bash npm install element-ui

      1. 接下来,您需要创建一个自定义样式文件,例如 custom-table-style.css,并在其中定义您的表头样式。例如:

      ```css table { border-collapse: collapse; }

      th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }

      th { cursor: pointer; }

      th:hover { background-color: #f2f2f2; }

      th:active { background-color: #ddd; } ```

      1. 然后,您需要在项目的 components 目录中创建一个自定义表头组件,例如 CustomTableHeader.vue。这个组件需要继承自 TableHeader 组件,如下所示:

      ```html

      ```

      1. 最后,在 App.vue 中,您可以添加自定义表头组件到列表项中:

      ```html

      ```

      在这个示例中,我们创建了一个自定义表头组件,并将它附加到 CustomTableHeader 组件的行中。当用户将鼠标悬停在表头上时,我们实现了拖动表头的功能。请注意,您需要在 handleDragEnd 方法中实现自定义拖动表头的功能。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部