vue+element table的弹窗组件

Posted 2020-11-23 treectj

在处理表格编辑相关的需求，是需要做一个弹框进行保存的；或者查看表格数据的详细信息时，也是需要做弹窗； 

当然 ，这是类似于这样的 ，当然 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>