Avue中 如何将avue-curd绑定到dialog

在 Avue 中使用 `avue-dialog` 和 `avue-curd` 组件可以实现将 Dialog 和 CRUD 绑定起来。具体步骤如下：

1. 安装 `avue` 和 `avue-cli`：

npm install avue avue-cli

2. 在 `main.js` 中引入 `avue` 和 `avue-cli`：

import Vue from 'vue'
import App from './App.vue'
import Avue from 'avue'
import AvueCli from 'avue-cli'

Vue.use(Avue)
Vue.use(AvueCli)

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 在 `App.vue` 中使用 `avue-dialog` 和 `avue-curd` 组件：

<template>
  <div>
    <avue-dialog ref="dialog" :visible="dialogVisible" :title="dialogTitle" @confirm="handleConfirm">
      <avue-curd ref="curd" :crud="crud" @search="handleSearch" @change="handleChange" @delete="handleDelete" />
    </avue-dialog>
    <button @click="openDialog">打开 Dialog</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      dialogTitle: '编辑',
      crud: {
        api: '/api/user',
        columns: [
          { label: 'ID', field: 'id' },
          { label: '姓名', field: 'name', type: 'input', rules: [{ required: true, message: '请输入姓名' }] },
          { label: '年龄', field: 'age', type: 'input', rules: [{ required: true, message: '请输入年龄' }] },
          { label: '性别', field: 'gender', type: 'radio', options: [{ label: '男', value: '男' }, { label: '女', value: '女' }] }
        ]
      }
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true
      this.$refs.curd.search()
    },
    handleSearch () {
      // 处理搜索逻辑
    },
    handleChange (data) {
      // 处理数据变化逻辑
    },
    handleDelete (data) {
      // 处理删除逻辑
    },
    handleConfirm () {
      const data = this.$refs.curd.getData()
      // 处理确认逻辑
    }
  }
}
</script>

在上述代码中，`avue-dialog` 组件用于显示 Dialog，`avue-curd` 组件用于显示 CRUD 表格。`crud` 对象包含了 CRUD 表格的配置信息，包括 API 地址、列信息等。`handleSearch`、`handleChange` 和 `handleDelete` 方法分别处理搜索、数据变化和删除事件。`handleConfirm` 方法处理确认事件，将数据保存到数据库中。