el-table树形结构，带复选框半选择状态（indeterminate）

最新推荐文章于 2024-09-05 08:59:36 发布

打断你个鸡腿儿

最新推荐文章于 2024-09-05 08:59:36 发布

阅读量3.3k

点赞数

分类专栏： vue element ui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/flaw_saint/article/details/122000106

版权

vue 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

element ui

5 篇文章 0 订阅

订阅专栏

<el-table
        ref="processData"
        :data="processData"
        highlight-current-row
        row-key="id"
        :tree-props="{children: 'children'}"
      >
        >
        <el-table-column label="字段名称" align="center" class="name">
          <template slot-scope="scope">
            <span>{{ scope.row.Name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否可调整" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.IsAdjust" :indeterminate="scope.row.isIndeterminate" @change="adjustCheck(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="是否显示" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.IsShow" :indeterminate="scope.row.Indeterminate" @change="showCheck(scope.row)" />
          </template>
        </el-table-column>
 </el-table>

processData: [
        {
          id: 1,
          Name: '百里',
          parentId: 0,
          IsAdjust: false,
          IsShow: false,
          children: [
            {
              id: 11,
              parentId: 1,
              Name: '守约',
              IsAdjust: false,
              IsShow: false
            },
            {
              id: 12,
              parentId: 1,
              Name: '玄策',
              IsAdjust: false,
              IsShow: false
            }
          ]
        }
],

adjustCheck(row) {
      // 全选、全不选
      if (row.children) {
        if (row.IsAdjust) {
          row.children.map(item => {
            item.IsAdjust = true
          })
        } else {
          row.children.map(item => {
            item.IsAdjust = false
          })
        }
      }
      this.processData.map(item => {
        if (item.children) {
          item.children.map(it => {
            if (it.parentId === row.parentId) {
              item.IsAdjust = true
            }
          })
          // 子项都选中
          const all = item.children.every(flag => flag.IsAdjust)
          if (all) {
            item.IsAdjust = true
            item.isIndeterminate = false
          }
          const some = item.children.some(flag => flag.IsAdjust)
          // 部分选中半选择状态
          if (some) {
            if (!all) {
              item.isIndeterminate = true
            }
          } else {
            item.IsAdjust = false
            item.isIndeterminate = false
          }
        }
      })
    },

showCheck(row) {
      if (row.children) {
        if (row.IsShow) {
          row.children.map(item => {
            item.IsShow = true
          })
        } else {
          row.children.map(item => {
            item.IsShow = false
          })
        }
      }
      this.processData.map(item => {
        if (item.children) {
          item.children.map(it => {
            if (it.parentId === row.parentId) {
              item.IsShow = true
            }
          })
          // 子项都选中则父选
          const all = item.children.every(flag => flag.IsShow)
          if (all) {
            item.IsShow = true
            item.Indeterminate = false
          }
          const some = item.children.some(flag => flag.IsShow)
          // 部分选中半选择状态
          if (some) {
            if (!all) {
              item.Indeterminate = true
            }
          } else {
            item.IsShow = false
            item.Indeterminate = false
          }
        }
      })
    }