el-dialog动态显示title提示_el-dialog title

假如你有一棵树，或者一个按钮，你点击这个树上的节点或者点击这个按钮，出来的对话框是一样的，但是对话框左边的提示不一样，这时候就需要动态添加title的提示语

比如我点页面树的节点 会出来添加人员按钮 点击添加人员 会出来这个dialog对话框 左上角有个添加人员 我需要在点击按钮的饿时候知道 我在给树的哪个节点添加人员 这时候就需要动态显示 添加*人员 而此时的就是树的节点的名称 我这个树的数据在table.vue 里面，我要想拿到这个节点的名字，我需要涉及到组件传值问题。话不多说上代码

1、这个页面在table.vue 组件，我需要拿到树的数据在tree.vue组件里面，然而他们都在indexvue里使用，所以要想在table.vue里面拿到tree.vue的值必须借助index.vue来传值
2、在table.vue 的el-dialog上动态绑定title名字 自定义 我自定义为titleName 此时的titleName为 添加****人员 ****代表树节点的名字treeName
即 titleName= ‘添加’ + treeName + ‘人员’

<el-dialog :title="titleName" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
1

3、在data里面定义titleName为空

 data() {
      return {
        titleName:'',
}
1
2
3
4

4、在index.vue里用到tree组件的地方绑定treeName

 <ly-tabel 
        :treeId="treeId"
        :treeName="treeName"
        ></ly-tabel>
1
2
3
4

5、在index.vue里data定义treeName

data(){
    return {
      treeId:'',
      treeName:''
    }
  },
1
2
3
4
5
6

6、在index.vue的methods定义方法

methods:{
    clickMainTree(data){
      this.treeName=data.name
      this.treeId=data.id;
    }
  }
};
1
2
3
4
5
6
7

7、在table.vue里面点击添加按钮的方法里

showDialog() {
        this.dialogVisible = true;
        this.titleName='添加'+ this.treeName +'人员';
        this.dialogTableData = []
        this.dialogTotal = 0
        this.dialogSearchValue = ''
        this.filterText = ''
        this.getTreeData();
1
2
3
4
5
6
7
8

8、效果就是这样的

可能我写的你们看着有些费劲 因为我项目目录你们不了解 记一次成长