elementui表格多选去掉表头的多选框

//第一步
<el-table :header-cell-class-name="cellClass"
//第二步monthods里写入
// 为多选的表头添加类名
      cellClass(row){
          if (row.columnIndex === 0) {
           return 'disabledCheck'
          }
      },
//第三步
    /* 去掉全选按钮 */
/deep/.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}
/* 去掉全选按钮 */
/deep/.el-table .disabledCheck .cell::before{
    content: '';
    text-align: center;
}
### 实现ElementUI表格组件中的复择 在Vue2与Element-UI框架下开发时,为了使`el-table`具备树形结构并带有复框的择功能,可以按照如下方式构建: #### 初始化配置 确保安装了最新版本的Vue以及Element-UI库之后,在项目中引入必要的样式文件和脚本。 ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` #### 创建具有复框的树形表格 定义一个包含嵌套对象数组的数据源来模拟树形结构,并通过`el-table-column`标签内的属性指定列类型为`selection`以启用模式[^1]。 ```html <template> <div id="app"> <!-- 定义表头 --> <el-button @click="toggleSelection()">全/取消</el-button> <el-table :data="tableData" row-key="id" default-expand-all border style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="label" label="名称"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, pid: null, label: "一级分类", children: [{ id: 2, pid: 1, label: "二级分类A" }, { id: 3, pid: 1, label: "二级分类B" }] }, { id: 4, pid: null, label: "另一级分类", children: [] } ] }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => this.$refs.multipleTable.toggleRowSelection(row)); } else { this.$refs.multipleTable.clearSelection(); } } } }; </script> ``` 上述代码片段展示了如何创建一个简单的树形表格,并为其添加了一个按钮用于触发全或清除所有项的操作。注意这里使用到了`row-key`属性指定了唯一标识符字段名以便正确处理父子关系;而`default-expand-all`则让所有的节点默认展开显示。 对于更复杂的场景比如懒加载子项或者分页等功能,则需进一步自定义逻辑和服务端交互部分。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值