关于elementui plus table的一些操作

表格选择回显

//单条回显
pickTable.value.toggleRowSelection(row, true)
//回显后 全选
const handleSelectionChange = (val: any) => {
  val.map((row: any, index: any) => {
    if (val.length <= 1) {
      return
    }
    pickTable.value.toggleRowSelection(row, false)
    if (index === val.length - 1) {
      pickTable.value.toggleRowSelection(row, true)
    }
  })
}

获取表格所有选项

const arr = pickTable.value.getSelectionRows()

清空选项

 tableRef.value.clearSelection()

树表格懒加载

<el-table v-loading="loading" ref="tableRef" lazy class="custom-table" :data="tableData" row-key="uuid"
          :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :header-row-style="config.table.header.row" :header-cell-style="config.table.header.cell" :border="true"
          @select="handleSelect" @select-all="handleSelectAll">
          <el-table-column type="selection" reserve-selection width="55" :selectable="selectable" />
          <el-table-column label="工作事项" prop="name" />
        </el-table

//获取列表时需要
 tableData.value.forEach((e) => {
          e["hasChildren"] = true;
          e["leave"] = 1;
          rowMaps.set(e.uuid, e);
        });

//懒加载展开
const load = (row: AssessWorkMatter, treeNode: unknown, resolve: (data: AssessWorkMatter[]) => void) => {
  getSubBaseAuditMatterList(row.uuid).then((data: any) => {
    resolve(data);
  })
};
 
//刷新 stageUuid是父节点的id
const materialRefench = () => {
  if (!stageUuid.value) return
  const data = rowMaps.get(stageUuid.value)
  // 重置节点
  tableRef.value.store.states.treeData.value[data.uuid].loaded = false;
  // 数据处理完成后 加载数据并展开父节点
  tableRef.value.store.loadOrToggle(data);
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要在 ElementUI-Plus 的 Table 树形结构中进行懒加载并判断是否有子节点数据,可以使用 `lazy` 属性和 `load` 方法实现。具体实现步骤如下: 1. 在 Table 组件中设置 `:lazy="true"`,开启懒加载模式。 2. 在 Table 组件中设置 `:load="loadData"`,指定加载数据的方法。 3. 在 `loadData` 方法中,根据当前节点的 `level` 和 `expanded` 状态来判断是否需要加载该节点的子节点数据。 4. 如果需要加载子节点数据,可以使用异步请求获取数据,并在回调中将数据作为参数传递给 `resolve` 方法。如果不需要加载子节点数据,可以直接调用 `resolve([])` 方法返回一个空数组。 下面是一个示例代码,帮助你更好地理解如何实现这个功能: ```vue <template> <el-table :data="data" :lazy="true" :load="loadData" tree-key="id" :tree-props="{children: 'children'}" > <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="状态" prop="status"></el-table-column> </el-table> </template> <script> export default { data() { return { data: [] } }, methods: { loadData(node, resolve) { if (node.level === 0) { // 根节点的数据 this.$http .get('/api/data') .then(response => { resolve(response.data) }) } else { // 非根节点的数据 if (node.expanded) { // 当前节点已经展开,需要加载子节点数据 this.$http .get(`/api/data/${node.data.id}`) .then(response => { resolve(response.data.children) }) } else { // 当前节点没有展开,无需加载子节点数据 resolve([]) } } } } } </script> ``` 在这个示例中,我们使用了 `resolve` 方法来返回异步获取的子节点数据或空数组。同时,我们还使用了 `node.level` 和 `node.expanded` 属性来判断当前节点的状态,从而决定是否需要加载子节点数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值