2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

Vue Element-UI dialog作为子组件,怎么在父组件里控制dialog的显示与隐藏?

javascript作者:猿2048志愿者

小白,请教各位个问题:

子组件

<template>
  <el-dialog title="收货地址" :visible.sync="dialogTableVisiblee" @close="close">
    <el-table :data="gridData">
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogTableVisiblee: Boolean
  },
  data () {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    close () {
      this.$emit('dialogHide')
    }
  }
}
</script>

父组件

<template>
  <div class="wrap">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <modal @dialogHide="dialogHanderHide" :dialogTableVisiblee="isShow"></modal>
  </div>
</template>
<script>
import modal from './modal'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        member: 1,
        invited: 77,
        id: 789,
        address: '上海市普陀区金沙江路 1518 弄'
      },],
      isShow: false
    }
  },
  components: {
    modal
  },
  methods: {
    handleClick (row) {
      this.isShow = true
      // console.log(row)
    },
    dialogHanderHide () {
      this.isShow = false
    }
  }
}
</script>

点击查看倒是可以实现效果,但是报错

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogTableVisiblee"

found in

---> <Modal> at src\components\modal.vue
       <Index> at src\components\index.vue
         <App> at src\App.vue
           <Root>
» 下一题:列表样式问题
评论
点击刷新
评论
相关问题
×添加代码片段