vue+element tree组件 点击按钮获取树 按钮名字随点击树内容动态改变

效果图如下：

点击按钮后

 

 思路：

1、首先填报单位右侧的是一个按钮，点击这个按钮之后会触发一个dialog，这里命名写的是{ {back}}

<el-button @click="visiblePopover = true">{
   
   { back }}</el-button>

然后在dialog的代码里有一行

:visible.sync="visiblePopover"

这里加.sync就是可以个性化命名这个visible，然后打开这个dialog后会有一个树组件

  <el-form-item label="填报单位" prop="org">
        <el-dialog
          width="30%"
          append-to-body
          title="选择区域"
          :visible.sync="visiblePopover"
        >
          <el-tree
            :data="orgNoOptions"
            :props="orgListTreeProps"
            node-key="orgNo"
            ref="orgListTree"
            @current-change="orgListTreeCurrentChangeHandle"
            default-expand-all //是否默认展开所有节点
            :expand-on-click-node="false"
            //是否在点击节点的时候展开或者收缩节点， 
            默认值为 true，如果为 false，则只有点箭头
            图标的时候才会展开或者收缩节点。
          >
          </el-tree>
        </el-dialog>
        <!-- <el-button @click="visiblePopover = true">{
   
   {
          searchForm.orgName || '点击选择所属机构'
        }}</el-button> -->
        <el-button @click="visiblePopover = true">{
   
   { back }}</el-button>
        <!-- </el-form-item> -->
      </el-form-item>

orgNoOptions和orgListTreeProps都在data里声明了。

 node-key您参考官方文档

在我这个例子中的node-key是orgNo

注：这里的treeDataTranslate方法写在这篇博客里了，可参考。

vue树形表格_北乎下周的博客-CSDN博客

然后您还记得这个按钮叫什么名字吗？在data中先声明的变量，随便叫什么名字都可以.

back: '凤凰街附近和',

<script>{     
import TableTreeColumn from '@/components/table-tree-column'
export default {
data () {
    return {
      searchForm: {
        orgNo: '',
        orgName: '',
        org: '',
        closetime: '',
        status: '',
        startTime: '',
        endTime: '',
      },
      disabled: true,
      back: '凤凰街附近和',
      dataList: [],
      initDataList: [], // list接口返回原始数据
      orgNoOptions: this.treeDataTranslate(JSON.parse(sessionStorage.getItem('orgList') || '[]'), 'orgNo', 'parentNo'),
      orgListTreeProps: {
        label: 'orgName',
        children: 'children'
      },
      visible: false,
      visiblePopover: false,
      statusList: [],
      dataListSelections: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
methods{
//机构树点击事件
 orgListTreeCurrentChangeHandle (data) {
      console.log(data,888888888888);
      this.searchForm.org = data.orgNo
      this.searchForm.orgName = data.orgName
      this.back = data.orgName
      // this.searchForm.org = data.orgName
      this.visiblePopover = false
    },
}
}
}

这里机构树里的点击事件里的data是什么，我打印出来，如下。

但是您还记得最初始的按钮状态吗？是这样的

 我们在页面一加载时候就先获取数据

activated () {
    this.getDataList()
  },

然后看这里面的this.back="点击选择所属机构"

  // 获取数据列表
    getDataList () {
      let that = this;
      // 先注释掉请求，用假数据调试先
      // this.dataList = this.treeDataTranslate(data.menuList, '', 'parentId', 'childrens')
      // console.log('this.dataList', this.dataList)
      this.$http({
        url: '/task/info/list',
        method: 'get',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
          'org': this.searchForm.org,
          'year': this.searchForm.year,
          'status': this.searchForm.status,
          'startTime': this.searchForm.startTime,
          'endTime': this.searchForm.endTime,
        }
      }).then(({ data }) => {
        // console.log(data);
        // that.dataList = that.treeDataTranslate(data.page.records, 'id', 'pid', 'childrens')
        if (data && data.code === 0) {
          // this.dataList = data.page.records
//initialDataList:list接口返回原始数据    
          that.initDataList = data.page;
          that.dataList = that.treeDataTranslate(data.page, 'id', 'parentId', 'childrens')
          // this.totalPage = data.page.total
          this.back = '点击选择所属机构'
        } else {
          this.dataList = []
          this.totalPage = 0
        }

      })
    },

如果您在activated把方法注释掉

按钮就会变回原来在data中写的文字