vue Ant Design Vue 树形控件增删改操作

参考文章：https://www.cnblogs.com/yfrs/p/ant-tree.html
框架：Ant Design Vue
新增：

新增下级：

编辑：

删除：

树状页面：index.vue

<template>
  <div>
    <a-card>
      <a-button @click="newlyAdded">新增</a-button>
      <a-tree :tree-data="treeData" :defaultExpandAll="true">
        <template slot="custom" slot-scope="item">
          <div>
            <span class="node-title">{{ item.title }} </span>
            <span style="margin-left: 20px">
              <span style="margin-right: 10px;">
                <a-icon type="plus-circle" @click="subordinateItem(item)" />
              </span>
              <span style="margin-right: 10px;">
                <a-icon type="edit" @click="modifyItem(item)" />
              </span>
              <span style="margin-right: 10px;">
                <a-popconfirm title="是否要删除此行？" @confirm="deleteItem(item)">
                  <a-icon type="delete" />
                </a-popconfirm>
              </span>
            </span>
          </div>
        </template>
      </a-tree>
    </a-card>
    
    <tree-lower-modules ref="treeLowerModules" @ok="onOk" />
  </div>
</template>

<script>
import treeLowerModules from './treeLowerModules.vue'

export default {
  name: '',
  components: { treeLowerModules },
  props: {},
  data() {
    return {
      treeData: [],
      selectKeys: []
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {
    this.getTreeData()
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    getTreeData() {
      this.treeData = [
        {
          title: '0',
          key: '0',
          scopedSlots: { title: 'custom' },
          children: [
            {
              title: '0-0',
              key: '0-0',
              scopedSlots: { title: 'custom' },
              children: [
                {
                  title: '0-0-0',
                  key: '0-0-0',
                  scopedSlots: { title: 'custom' },
                },
                {
                  title: '0-0-1',
                  key: '0-0-1',
                  scopedSlots: { title: 'custom' },
                },
                {
                  title: '0-0-2',
                  key: '0-0-2',
                  scopedSlots: { title: 'custom' },
                },
              ],
            },
            {
              title: '0-1',
              key: '0-1',
              scopedSlots: { title: 'custom' },
              children: [
                {
                  title: '0-1-0',
                  key: '0-1-0',
                  scopedSlots: { title: 'custom' },
                },
                {
                  title: '0-1-1',
                  key: '0-1-1',
                  scopedSlots: { title: 'custom' },
                },
                {
                  title: '0-1-2',
                  key: '0-1-2',
                  scopedSlots: { title: 'custom' },
                },
              ],
            },
            {
              title: '0-2',
              key: '0-2',
              scopedSlots: { title: 'custom' },
            },
          ],
        },
        {
          title: '1',
          key: '1',
          scopedSlots: { title: 'custom' },
          children: [
            {
              title: '1-1',
              key: '1-1',
              scopedSlots: { title: 'custom' },
            },
            {
              title: '1-2',
              key: '1-2',
              scopedSlots: { title: 'custom' },
            },
            {
              title: '1-3',
              key: '1-3',
              scopedSlots: { title: 'custom' },
            },
          ],
        },
        {
          title: '2',
          key: '2',
          scopedSlots: { title: 'custom' },
        },
      ]
    },
    // 新增
    newlyAdded() {
      const item = { key: this.treeData[0].key, operation: 1 }
      this.$refs.treeLowerModules.add(item)
    },
    // 添加下级
    subordinateItem(item) {
      item.operation = 2
      this.$refs.treeLowerModules.add(item)
    },
    // 修改
    modifyItem(item) {
      this.$refs.treeLowerModules.edit(item)
    },
    // 删除
    deleteItem(item) {
      this.selectKeys = [item.key]
      this.dataDriveDelete()
    },
    onOk(val) {
      if (val.operation === 1) {
        this.selectKeys = [val.key]
        this.dataDriveAddSame(val.title)
      } else if (val.operation === 2) {
        this.selectKeys = [val.key]
        this.dataDriveAddSub(val.title)
      } else if (val.operation === 3) {
        this.selectKeys = [val.key]
        this.dataDriveModify(val.title)
      }
    },
    getTreeDataByKey(childs = [], findKey) {
      let finditem = null
      for (let i = 0, len = childs.length; i < len; i++) {
        let item = childs[i]
        if (item.key !== findKey && item.children && item.children.length > 0) {
          finditem = this.getTreeDataByKey(item.children, findKey)
        }
        if (item.key == findKey) {
          finditem = item
        }
        if (finditem != null) {
          break
        }
      }
      return finditem
    },
    getTreeParentChilds(childs = [], findKey) {
      let parentChilds = []
      for (let i = 0, len = childs.length; i < len; i++) {
        let item = childs[i]
        if (item.key !== findKey && item.children && item.children.length > 0) {
          parentChilds = this.getTreeParentChilds(item.children, findKey)
        }
        if (item.key == findKey) {
          parentChilds = childs
        }
        if (parentChilds.length > 0) {
          break
        }
      }
      return parentChilds
    },
    // 添加同级
    dataDriveAddSame(title) {
      let parentChilds = this.getTreeParentChilds(
        this.treeData,
        this.selectKeys[0]
      )
      parentChilds.push({
        title: title,
        key: new Date().getTime(),
        scopedSlots: { title: 'custom' },
      })
    },
    // 添加下级
    dataDriveAddSub(title) {
      let selectItem = this.getTreeDataByKey(this.treeData, this.selectKeys[0])
      if (!selectItem.children) {
        this.$set(selectItem, 'children', [])
      }
      selectItem.children.push({
        title: title,
        key: new Date().getTime(),
        scopedSlots: { title: 'custom' },
      })
      this.$forceUpdate()
    },
    // 修改
    dataDriveModify(title) {
      let selectItem = this.getTreeDataByKey(this.treeData, this.selectKeys[0])
      selectItem.title = title
    },
    // 删除
    dataDriveDelete() {
      let parentChilds = this.getTreeParentChilds(
        this.treeData,
        this.selectKeys[0]
      )
      let delIndex = parentChilds.findIndex(
        (item) => item.key == this.selectKeys[0]
      )
      parentChilds.splice(delIndex, 1)
    }
  }
}
</script>

<style scoped lang="less"></style>

操作弹窗：treeModules.vue

<template>
  <a-modal :title="title" v-model="visible" :confirmLoading="confirmLoading" @ok="handleSubmit">
    <a-form :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
        <a-input :disabled="disabled" placeholder="请输入名称" v-decorator="['title', {rules: [{ required: true, message: '请输入名称' }]}]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

export default {
  address: 'TreeModules',
  props: {},
  components: {},
  data () {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      title: '',
      mdl: {},
      disabled: false,
      
      operation: 1,
      record: {}
    }
  },
  beforeCreate () {},
  created () {},
  computed: {},
  methods: {
    add (record) {
      this.operation = record.operation
      if (record.operation === 1) {
        this.title = '新增'
      } else {
        this.title = '添加下级'
      }
      this.form.resetFields()
      this.visible = true
      this.disabled = false
      this.record = record
    },
    edit (record) {
      this.record = record
      this.operation = 3
      this.disabled = false
      this.title = '编辑名称'
      this.mdl = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl,
          'title'
        ))
      })
    },
    // 保存
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.operation = this.operation
          values.key = this.record.key
          this.confirmLoading = true
          this.$emit('ok', values)
          this.form.resetFields()
          this.$message.success('保存成功')
          this.visible = false
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
</style>