前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3+element-plus 表格table实现树状结构父子级互不影响

vue3+element-plus 表格table实现树状结构父子级互不影响

作者头像
用户5899361
发布2024-01-31 08:05:58
2640
发布2024-01-31 08:05:58
举报
文章被收录于专栏:学习java的小白学习java的小白

代码部分

html部分

代码语言:javascript
复制
<el-dialog
      :model-value="dialog.showFlag"
      title="授权"
      @open="getCompany"
      @close="updateRoleMenuFlag"
    >
      <!--公司列表页-->
      <el-table
        :data="companyList"
        row-key="id"
        border
        default-expand-all
        class="table-style"
        ref="companyTableRef"
        @select="handleSelectionChange"
      
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="companyName" label="公司名称" sortable />
        <el-table-column prop="endTime" label="到期时间" sortable>
          <template v-slot="scope">
            {{ dayjs(scope.row.endTime).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateRoleMenuFlag">关闭</el-button>
        </span>
      </template>
    </el-dialog>

js部分

代码语言:javascript
复制
//选择选中时会触发该事件
const handleSelectionChange = (selection:Array<TreeCompanyVO>, row:TreeCompanyVO) => {
  selection.forEach(item=>{
    console.log(item.id!==row.id)
    if(item.id!==row.id){
      companyTableRef.value.toggleRowSelection(item,false)
    }else{
      companyTableRef.value.toggleRowSelection(row,true)
    }
  })
 
  selectCompany.value = row
  
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-01-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html部分
  • js部分
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档