首页el-table tree 勾选

el-table tree 勾选

时间: 2023-11-09 10:06:27 浏览: 169

el-select-tree:ElementUI的el-select与el-tree结合

5星 · 资源好评率100%

精选树 ElementUI的el-select与el-tree结合在一起。在线示例用法安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完

el-table tree 勾选可以通过以下步骤实现： 1. 在 el-table 中设置 `tree` 属性为 `true`，表示开启树形结构。 2. 在 el-table-column 中设置 `type` 属性为 `selection`，表示开启勾选框。 3. 在 el-table-column 中设置 `show-checkbox` 属性为 `true`，表示显示勾选框。 4. 在 el-table-column 中设置 `reserve-selection` 属性为 `true`，表示保留勾选状态。 5. 在 el-table-column 中设置 `prop` 属性为树形结构的字段名，例如 `prop="name"`。 6. 在 el-table-column 中设置 `label` 属性为树形结构的字段名对应的中文名称，例如 `label="名称"`。以下是一个示例代码： ``` <el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="true" :row-key="row => row.id" show-summary> <el-table-column type="selection" show-checkbox :reserve-selection="true"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ```

阅读全文