# 表单弹窗 Form Dialog


<template>
  <section class="container">
    <el-button @click="add">新增</el-button>
    <el-button @click="edit">编辑</el-button>
    <oce-form-dialog
      ref="formDialog"
      v-model="form"
      :column="tableColumn"
      :option="dialogOption"
    ></oce-form-dialog>
  </section>
</template>

<script>
export default {
  name: 'formDialogDemo',
  data() {
    return {
      form: {},
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
        },
        {
          label: '列2',
          prop: 'column2',
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      dialogOption: {},
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    add() {
      this.$refs.formDialog.show('add')
    },
    edit() {
      this.$refs.formDialog.show('edit', {
        column1: 'column1',
        column2: 'column2',
        column3: 'column3',
        column4: 'column4',
      })
    },
  },
  created() {},
  mounted() {},
}
</script>

Expand Copy
Last Updated: 4/25/2023, 2:34:05 PM