后管添加编辑删除共用一个弹出层(动态title)

1 data当中定义

动态改变title值

1. HTML

 <!-- 添加 编辑 删除 分配权限(弹出层) -->
    <el-dialog :title="titleResult[dialogStatus]" 
    :visible.sync="dialogVisible" width="50%"  
    :close-on-click-modal="false" :before-close="handleClose">
      <span>这是一段信息</span>
       <div v-if="titleResult[dialogStatus]=='分配角色'"></div>//只要点击分配角色才会显示内容
 <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="btnResult()">确 定</el-button>
    </el-dialog>

//:title="titleResult[dialogStatus]"  动态title
//:close-on-click-modal="false" 点击空白区域不会隐藏弹框效果

2. JS

data(){
return{
      dialogVisible: false,//默认显示隐藏弹框
      dialogStatus: '',//添加 编辑/删除弹出的title
      titleResult: {
        add: "添加",
        edit: "编辑",
        dele: '删除',
        distribution: '分配角色'
      },
}
},
methods: {
    // 点击添加 编辑 删除 分配
    allot(index) {
      this.dialogVisible = true;//点击显示弹框
      //this.dialogStatus='add'为添加弹框 依次类推
      index == 1 ? (this.dialogStatus='add') : (index == 2 ?     (this.dialogStatus='edit') : (index == 3 ? (this.dialogStatus='dele') :
      (this.dialogStatus='distribution')
      ))
    },
   // 添加 编辑 删除 对应弹框确定按钮
   PS:这里的判断要用双等不是单等（“==”是等一操作符，判断两边是否相等。）
   btnResult(){
  if(this.dialogStatus=='add'){
  //这里写需要的逻辑
  }else if(this.dialogStatus=='dele'){

  }
  }

那=和==的区别到底是什么？

1、含义不同
“=”是赋值的意思。它的作用是将一个表达式的值赋给一个左值。所谓左值是指一个能用于赋值运算左边的表达式。左值必须能够被修改，不能是常量。我们用变量作左值，还可以看到，指针和引用也可以作左值。
“==”是等一操作符，判断两边是否相等。利用相等运算符，如果希望相等运算符返回true，则运算符两侧的值或语句必须使相等的；如果不相等，则 = =运算符返回false。
2、返回值的结果不同：
“=”的结果实际上意味着把右边表达式的值赋给左边的运算数。赋值运算表达式的值也就是所赋的值。也就是说，“$a = 3”的值是 3。
“= = ” 则不同，它会返回false或true值。所以例如“4” = =4这样的语句将返回true，因为JavaScript会将字符“4”转换成数字4。如果希望该语句返回false，则需要使用恒等运算符（===）。
3、是否存在强制转换：

“=”该运算符将执行强制类型转换，所以也会有一些特殊的规则：
（1）如果一个操作数是数字，另一个是字符串，==运算符会尝试在比较之前将字符串转换成数字；
（2）如果一个操作数是布尔值，那么在比较之前它将会被运算符强制转换成为数值类型，在这种情况下，true被转换为1，而false被转换为0。
（3）如果一个操作数是null，而另一个是underfined，比较结果为true；
（4）如果一个或两个操作数都是NaN，比较结果为false。
“= =”不存在强制转换，而是赋值运算将原变量的值拷贝到新变量中（传值赋值），所以改变其中一个并不影响另一个。
代码及解析自己撰写

2 计算属性方法

1. HTML

// 静态/动态的button按钮（和添加修改类似）
    <el-button type="primary"  @click="addPar(1)" size="mini">添加静态参数</el-button>
    <el-button type="primary"  @click="addPar(2)" size="mini">添加动态态参数</el-button>


  <!-- 添加参数对话框 -->
            <el-dialog :title="'添加'+ textTitle" 
            :visible.sync="dialogVisible"  width="50%">
            </el-dialog>
            
//textTitle是定义动态计算属性

2. JS

// 1 首先在data当中定义空的title值
  data() {
        return {
            titleTex:'',//定义空的title
            dialogVisible: false,//弹框false
        }
    },
    // 2 在方法里面让data定义的值与点击事件对应
     methods: {
        // 添加参数
        addPar(e) {
            this.dialogVisible = true;//点击显示弹框
            this.titleTex = e//让定义空的title赋值对应的e
            console.log(this.titleTex);
        }},
     //  3 最后在属性当中定义需要显示的文本
 computed: {
        // 动态计算标题文本
        textTitle() { 
            if (this.titleTex === 1) {
                return '动态参数'
            } else { 
                return '静态参数'
            }
        }
    }