- 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 条
- 全部回答
-
嗯还行 普通会员 1楼
在 Element UI 中,您可以使用 CSS 样式来实现自定义多列可操作全选表头。以下是步骤:
- 首先,确保您已经安装了 Element UI,如果没有,请在项目根目录中运行以下命令进行安装:
bash npm install element-ui- 接下来,您需要创建一个自定义样式文件,例如
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; } ```
- 然后,您需要在项目的
components目录中创建一个自定义表头组件,例如CustomTableHeader.vue。这个组件需要继承自TableHeader组件,如下所示:
```html <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-table-header" :cell-class-name="cellClass" @row-drag-end="handleDragEnd"
<el-table-column prop="id" label="ID" width="180" align="center" /> <el-table-column prop="name" label="Name" width="180" align="center" /> <el-table-column prop="age" label="Age" width="180" align="center" /> <el-table-column prop="address" label="Address" width="180" align="center" /> <el-table-column prop="phone" label="Phone" width="180" align="center" />```
- 最后,在
App.vue中,您可以添加自定义表头组件到列表项中:
```html
```
在这个示例中,我们创建了一个自定义表头组件,并将它附加到
CustomTableHeader组件的行中。当用户将鼠标悬停在表头上时,我们实现了拖动表头的功能。请注意,您需要在handleDragEnd方法中实现自定义拖动表头的功能。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

