表格编辑 删除对应不通的弹窗

代码:

<template>
  <div class="">
       <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
       <el-table-column
        prop="address"
        label="操作">
        <template>
          <div>
            <el-button type="primary" @click="$refs.dialogRef.fn(true)">编辑</el-button>
            
            <el-button type="success" @click="$refs.dialogRef.fn(false)">新增</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  
     <!-- <dialog ref="dialogRef"> -->
      <Dialog  ref="dialogRef"/>
  </div>
</template>

<script>
import Dialog   from "./components/dialog.vue";
export default {
data() {
  return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    
  }
},
  components:{
     Dialog
  },
  name: '',
  methods: {

  }
}
</script>

<style scoped>

</style>

弹窗的代码:

<template>
  <div class="">
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <el-form :model="form"  :rules="rules">
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>

    </el-form-item>
   </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form:{
          name:'',//姓名
          age:''  //年龄
        },
          rules:{
            name:[{
              required:true,
              message:'必填',
              trigger:'blur'
            }],
             age:[{
              required:true,
              message:'必填',
              trigger:'blur'
            }]

         },
        dialogVisible: false
      };
    },
  
    methods: {
    
    }
  };
</script>

<style scoped>

</style>

视图:

 

 

 

实现的具体思路:

1.弹窗的标题控制

 

 

1.默认是新增

在点击按钮的时候的逻辑处理。

 传入的参数来控制是新增还是编辑

 默认情况下是新增的。

当点击新增的时候。

this.isEdit=false

isEdit等于false

此时对应的标题:

 调用的接口:

 

(2)当点击编辑的时候

传入过来的值为true

此时this.isEdit=true

此时对应的标题:

 调用的接口:

 

 总结;

1.两个按钮同时用一个弹窗的时候，通过isEdit来控制不同的场景。

2.也就是一个布尔值来控制标题的显示和接口的调用。