vue+element table的彈窗組件

在處理表格編輯相關的需求，是需要做一個彈框進行保存的；或者查看表格數據的詳細信息時，也是需要做彈窗； 

當然 ，這是類似於這樣的 ，當然 element 已經幫我們做好 彈窗這一塊

主要 我想記錄的是 將 彈窗 做為組件，並且如果彈窗部分有請求部分的話，就到彈窗組件內部處理，相對於說解耦吧

也有子組件改變父組件傳過來的 值 

 

 

 

 

 

 

表格部分，也就是主要顯示地方

<template>
  <div class="myComponent">
    <el-table :data="tableData" stripe 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 label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
　　　　彈窗組件引入
　　　　dialogVisible : 表示 彈框是否顯示 父組件 傳 子組件的值 
　　　　dialogInfo : 表示 當前點擊查看的數據 父組件 傳 子組件的值
　　　　update:dialogVisible : 表示 組件 點擊取消關閉確定 傳過來的 是否顯示彈窗 子組件 傳 父組件
　　 -->
    <component-dialog :dialogVisible="dialogVisible" :dialogInfo="dialogInfo" @update:dialogVisible="dialogVisibles"></component-dialog>
  </div>
</template>

<script>
import componentDialog from "./components/dialog"; //引入組件
export default {
 //引入組件
  components: {
    componentDialog
  },
  name: "myComponent",
  data() {
    return {
　　　 //控制彈窗 顯示
      dialogVisible: false,
　　　 //點擊查看按鈕 這條數據詳細信息
      dialogInfo:{},
　　　 //table 的假數據
      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 弄"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
　　//點擊查看 按鈕 的事件
    handleClick(info) {
      console.log(info);
      this.dialogVisible = true;
      this.dialogInfo = info
    },
   //子組件傳 過來的 數據
    dialogVisibles(v){
        this.dialogVisible = v
        console.log(v)
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

 

彈窗組件部分

<template>
  <el-dialog title="詳細信息" :visible.sync="dialogVisible" :before-close="cancelDialog" >
    <el-form class="form">
      <el-form-item label="日期 : ">
        <p>{{dialogInfo.date}}</p>
      </el-form-item>
      <el-form-item label="姓名 : ">
        <p>{{dialogInfo.name}}</p>
      </el-form-item>
      <el-form-item label="地址 : ">
        <p>{{dialogInfo.address}}</p>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="cancelDialog">確 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
//父組件 傳 過來的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: {
      type: Object,
      default: {}
    }
  },
  watch: {
　　//監聽 彈窗顯示， 可以用來寫 請求接口
    dialogVisible: function(newVal, oldVal) {
      if (newVal) {
        console.log(newVal);
      }
    }
  },
  components: {},
  name: "componentDialog",
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
   //修改父組件傳過來的值
    cancelDialog() {
      this.$emit("update:dialogVisible", false);
    }
  }
};
</script>
<style lang='scss' scoped>
.form{
    background: #eee;
    padding: 0 10px;
}
.dialog-footer{
    text-align: center;
}
</style>