组件

<!--
  选中父级，子级不选中
-->
<template>
    <div>
      <el-tree
        :data="data"
        :props="props"
        :check-strictly="checkStrictly"
        ref="tree"
        :node-key="nodeKey"
        @check="getCheckedKeys"
        show-checkbox
        :default-expanded-keys="Expandeds"
        :default-checked-keys="Selecteds">
      </el-tree>
    </div>
</template>
<script>
export default {
  props: {
    /* checkStrictly: {
      type: Boolean,
      default () {
        return false
      }
    }, */
    nodeKey: {
      type: String,
      default () {
        return []
      }
    },
    Selecteds: {
      type: Array,
      default () {
        return []
      }
    },
    Expandeds: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    // 树节点配置选项
    props: {
      type: Object,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      TreeData: [],
      AllData: [],
      flag: false,
      checkStrictly: true
    }
  },
  watch: {
    Selecteds () {
      // this.TreeData = this.Selecteds
      let that = this
      this.checkStrictly = true
      this.$nextTick(() => {
        that.TreeData = that.Selecteds
        that.$refs.tree.setCheckedKeys(that.Selecteds)
        // that.checkStrictly = false
      })
    }
  },
  computed: {
    data () {
      return this.options
    }
  },
  methods: {
    orgCheckChange (data, checked, indeterminate) {
    },
    /* 获取当前树的ID值 */
    getCheckedKeys (node, keys) {
      // console.log(node)
      // console.log(keys)
      let that = this
      this.flag = true
      // let checkedKeys = keys.checkedKeys
      // let halfChecked = keys.halfCheckedKeys
      // let checkArr = checkedKeys.concat(halfChecked)
      // this.TreeData = checkedKeys
      // this.AllData = checkArr
      this.setNode(this.$refs.tree.getNode(node.locationId))
      this.$nextTick(function () {
        that.AllData = that.$refs.tree.getCheckedKeys()
      })
    },
    // 递归设置子节点和父节点
    setNode (node) {
      if (node.checked) {
        // 如果当前是选中checkbox,则递归设置父节点和父父节点++选中
        this.setParentNode(node)
      } else {
        // 如果当前是取消选中checkbox,则递归设置子节点全部取消选中
        this.setChildNode(node)
      }
    },
    // 递归设置父节点全部选中
    setParentNode (node) {
      if (node.parent) {
        for (const key in node) {
          if (key === 'parent') {
            node[key].checked = true
            this.setParentNode(node[key])
          }
        }
      }
    },
    // 递归设置子节点全部取消选中
    setChildNode (node) {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach(item => {
          item.checked = false
          this.setChildNode(item)
        })
      }
    }
  }
}
</script>

阅读全文

<el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
    </template>
</el-table-column>