添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
深情的鸡蛋  ·  牛油果不是非吃不可吗？-新华网·  10 月前    · 
小眼睛的充值卡  ·  为什么说烽火戏诸侯的《雪中悍刀行》堪称神作？ ...·  1 年前    · 
老实的皮蛋  ·  习近平在福建 - 专题专栏 - 东南网·  1 年前    · 
火星上的紫菜汤  ·  山田 - 萌娘百科 萬物皆可萌的百科全書·  1 年前    · 
坚强的吐司  ·  雄商高铁河南段选址公示：鲁豫线路之争或以折中 ...·  1 年前    · 
link之家  ›  ElementUI 中 Table 嵌套另一个 Table，多选嵌套多选
table 嵌套 复选框
https://juejin.cn/post/6943048796209643528
有胆有识的豆腐
1 年前

在 <el-table-column> 中的 <template> 里面直接嵌套 <table> ，内容就是 props.row.childList 

<el-table-column type="expand">
  <template slot-scope="props">
    <el-table :data="props.row.childList"/>

  • 复选框如何嵌套复选框
    • 

    不要用table自带的type="selection"，所有的复选框都自己写
    
<el-table-column width="50" align="center">
  <!-- 头部的全选按钮，最大的全选 -->
  <div slot="header" slot-scope="scope">
    <el-checkbox
      v-model="globelCheckedAll"
      @change="clickCheckAll(scope)"
      :indeterminate="isIndeterminateAll"
    ></el-checkbox>
  </div>
  <!-- 每一项的选择框，全选子元素 -->
  <template slot-scope="scope">
    <el-checkbox
      v-model="scope.row.isChecked"
      :indeterminate="scope.row.isIndeterminate"
      @change="handleSelectionChange(scope.row)"
    ></el-checkbox>
  </template>
</el-table-column>
<el-table-column align="center" type="expand">
  <template slot-scope="props">
    <!-- 展开内容表 -->
    <el-table
      :data="props.row.childList"
      style="width: 100%"
      class="child-table"
      row-key="guid"
      <el-table-column label="选择" width="120" align="center">
      <!-- 子元素的选择框 -->
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isChecked"
            @change="clickCheckItemFn(props.row, scope.row)"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </template>
</el-table-column>
data() {
  return {
    isIndeterminateAll: false,
    globelCheckedAll: false,
    tableData: []
mounted() {
  this.initData()
methods: {
  initData() {
    for (let index = 0; index < 11; index++) {
      this.tableData.push({
        id: index + 1,
        isChecked: false,
        isIndeterminate: false,
        childList: [
            lastTime: '2021/3/2 12:00',
            isChecked: false
            lastTime: '2021/3/2 12:00',
            isChecked: false

    <template>
  <page-box title="test">
    <div slot="box" class="issued-manage">
      <!-- 数据表 -->
      <el-table
        border
        :data="tableData"
        class="issued-list"
        height="100%"
        style="width: 100%"
        <el-table-column width="50" align="center">
          <div slot="header" slot-scope="scope">
            <el-checkbox
              v-model="globelCheckedAll"
              @change="clickCheckAll(scope)"
              :indeterminate="isIndeterminateAll"
            ></el-checkbox>
          </div>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isChecked"
              :indeterminate="scope.row.isIndeterminate"
              @change="handleSelectionChange(scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column align="center" type="expand">
          <template slot-scope="props">
            <!-- 展开内容表 -->
            <el-table
              :data="props.row.childList"
              style="width: 100%"
              class="child-table"
              row-key="guid"
              <el-table-column label="选择" width="120" align="center">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.isChecked"
                    @change="clickCheckItemFn(props.row, scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="auto" label="通行授权" />
              <el-table-column prop="status" label="下发状态" />
              <el-table-column prop="lastTime" label="最后下发时间" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="operat-box">
                      class="icon icon-del"
                      @click="
                        clickDelFn(
                          props.row,
                          props.$index,
                          scope.row,
                          scope.$index
                    >删除</i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" prop="id" width="60"></el-table-column>
        <el-table-column label="头像" width="60">
          <template slot-scope="scope">
            <img :src="scope.row.image" class="avator-img" alt="" srcset="" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="联系方式" prop="tel"></el-table-column>
        <el-table-column label="所属单位" prop="unit"></el-table-column>
        <el-table-column label="人员类型" prop="type"></el-table-column>
        <el-table-column label="录入时间" prop="time"></el-table-column>
      </el-table>
    </div>
  </page-box>
</template>
<script>
export default {
  data() {
    return {
      isIndeterminateAll: false,
      globelCheckedAll: false,
      tableData: []
  mounted() {
    this.initData()
  methods: {
    initData() {
      for (let index = 0; index < 11; index++) {
        this.tableData.push({
          id: index + 1,
          name: '张三',
          tel: '18111778899',
          unit: '公司A-部门C-部门C1',
          image:
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974063438,76061761&fm=26&gp=0.jpg',
          type: '员工',
          time: '2021/2/2712:00',
          isChecked: false,
          isIndeterminate: false,
          childList: [
              guid: 'xx97',
              auto: '高区出入口',
              status: '未下发',
              lastTime: '2021/3/2 12:00'




    
,
              isChecked: false
              guid: 'xx98',
              auto: '高区出入口',
              status: '未下发',
              lastTime: '2021/3/2 12:00',
              isChecked: false
    // 手动更改全选按钮的状态
    updateCheckedAllBtnStatus(value) {
      // 如果是选了勾选
      if (value) {
        // 检查是否所有数据都手动勾选了
        let isAllChecked = this.tableData.every(v => v.isChecked)
        if (isAllChecked) {
          this.globelCheckedAll = true
          this.isIndeterminateAll = false
        } else {
          this.isIndeterminateAll = true
      } else {
        // 检查是否所有数据取消勾选了
        let isAllCancelChecked = this.tableData.every(v => v.isChecked == false)
        if (isAllCancelChecked) {
          this.globelCheckedAll = false
          this.isIndeterminateAll = false
        } else {
          this.isIndeterminateAll = true
    // 全选所有
    clickCheckAll(item) {
      // 此处console的item无效，仅为了eslint校验，而slot-scope="scope"又是必传
      console.log(item)
      this.tableData = this.tableData.map(val => {
        val.isChecked = this.globelCheckedAll
        val.childList = val.childList.map(i => {
          i.isChecked = this.globelCheckedAll
          return i
        return val
      this.updateCheckedAllBtnStatus(this.globelCheckedAll)
    // 每行选择事件
    handleSelectionChange(val) {
      val.childList = val.childList.map(i => {
        i.isChecked = val.isChecked
        return i
      val.isIndeterminate = false
      this.updateCheckedAllBtnStatus(val.isChecked)
    // 每个小项选择事件-单选
    clickCheckItemFn(row, item) {
      // 如果是选了勾选
      if (item.isChecked) {
        this.isIndeterminateAll = true
        // 检查是否所有数据都手动勾选了
        let isAllChecked = row.childList.every(v => v.isChecked)
        if (isAllChecked) {
          row.isChecked = true
          row.isIndeterminate = false
        } else {
          row.isIndeterminate = true
      } else {
        // 检查是否所有数据取消勾选了
        let isAllCancelChecked = row.childList.every(v => v.isChecked == false)
        if (isAllCancelChecked) {
          row.isChecked = false
          row.isIndeterminate = false
          this.isIndeterminateAll = false
        } else {
          row.isIndeterminate = true
    // 单项操作-删除
    clickDelFn(row, index, item, itemIndex) {
      console.log(row, index, item, itemIndex)
</script>
<style lang="scss" scoped>
img{
  width:50px;
  height: 50px;
</style>
复制代码
      
     
       
    相关推荐
     
  •   
      
     
       基于ElementUI中Table嵌套实现多选
     
    通过上面这段代码我们调用的时候传节点的id会返回一个数组，数组包含它所在路径上的对象，这样我们就可以通过循环遍历这个数组通过toggleRowSelection反法来实现页面状态样式的改变。 在点击子节点取消的时候我们需要判断同级的节点是不是都取消了，如果都取消了需要把这个节点…
     
    •  3007
      •  
     
       Element实现表格嵌套、多个表格共用一个表头的方法；
     
    根据后端返回的数据 （res 是一个数组，它的元素是一个对象，对象里面的ext属性是一个对象，它又包含了，default、free和pay三个属性，且这三个都是数组格式。）： res的ext属性下的三个数组 default、free、pay，每一个数组要大的一行（这一行中，第一…
     
    •  5553
      •  
     
       Vue3.0 — element-plus 表单嵌套表格实现动态表单验证【实战】
     
    我想有不少小伙伴都有遇到过表单嵌套表格，那么在这种情况下怎么实现动态验证呢？（即表单项可以动态添加/删除） 效果图如下 表格有添加和删除按钮，点击提交进行表单验证 element官方有给出表单动态验证
     
    •  4740
      •  
     
       Element-ui中 表单（Form）校验的几种形式 及 表单嵌套表格含上传（Upload）组件的综合案例
     
    小知识，大挑战！本文正在参与“  程序员必备小知识 ”创作活动 本文同时参与 「掘力星计划」  ，赢取创作大礼包，挑战创作激励金 1. Element-ui中 表单（Form）校验的几种形式 1.1 
     
    •  2129
      •  
     
       vue2.0+Element UI 实现动态表单（点击按钮增删表格及嵌套输入框的增删）
     
    动态实现表单的行增减删除，先看下效果如图，点击添加按钮行数下方会新增一行表格，点击删除会删除相应行的表格，表格行内嵌套了input输入框最近刚写了这个项目，所以我们一切以后端请求接口返回数据为例我们这
     
    •  1226
      •  
     
      
    私信
    •  
    推荐文章
    深情的鸡蛋  ·  牛油果不是非吃不可吗？-新华网
    10 月前
    小眼睛的充值卡  ·  为什么说烽火戏诸侯的《雪中悍刀行》堪称神作？ - 知乎
    1 年前
    老实的皮蛋  ·  习近平在福建 - 专题专栏 - 东南网
    1 年前
    火星上的紫菜汤  ·  山田 - 萌娘百科 萬物皆可萌的百科全書
    1 年前
    坚强的吐司  ·  雄商高铁河南段选址公示：鲁豫线路之争或以折中方案落定_阳谷
    1 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    link之家 - 链接快照平台
    © 2024 ~ 沪ICP备11025650号