Vite+Vue3+Tsx+ElementPlus实现表单配置探索之旅

我们已经学过Vite + Vue 3 + tsx + element plus搭建环境，接下来就要建立表单配置了。

    搭建的时候踩坑很多，下面就讲讲配置表单的时候常遇到的坑。

    **注意** 

    1. 官方教程使用的是setup，如果你用的是compostion API，可能会出现很多问题，注意切换。

    2. 如果你安装了vue-devtools，可能会出现无法运行的情况，可以通过如下方式关闭。

    ```
    function createApp (rootComponent) {
      const app = Vue.createApp(rootComponent)
      app.config.devtools = false  //关闭devtools
      return app
    }
    ```

    3. 创建```common```文件保存通用配置代码，引入到根组件中。

    ```
    import { defineComponent, ref } from 'vue'

    export default defineComponent({
      setup() {
        const value = ref('')
        return {
          value
        }
      }
    })
    ```

    4.```Table```组件中配置

    ```
    export default defineComponent({
      components: {
        ElButton,
        ElTable,
        ElTableColumn,
        ElForm,
        ElFormItem,
      },
      setup() {
        const value = ref('')
        const columns = ref([
          {
            prop: 'name',
            label: '姓名',
            minWidth: '100',
          },
          {
            prop: 'age',
            label: '年龄',
            minWidth: '100',
          },
          {
            prop: 'address',
            label: '地址',
            minWidth: '100',
          },
        ])
        const data = ref([
          {
            name: 'John',
            age: 18,
            address: 'New York No. 1 Lake Park',
          },
          {
            name: 'Tom',
            age: 22,
            address: 'London No. 1 Lake Park',
          },
          {
            name: 'Lily',
            age: 28,
            address: 'Sidney No. 1 Lake Park',
          },
        ])

        const rowSelectionConfig = ref({
          type: 'checkbox',
          selectedRowKeys: [],
          selectionChanged({ selection, row, selectedKeys }) {
            console.log(selectedKeys, row)
          },
        })

        const getValue = () => {
          console.log(value.value)
        }
        return {
          value,
          columns,
          data,
          rowSelectionConfig,
          getValue,
        }
      },
    })
    ```

    以上所有的代码经过了我多番测试才不报错，同样适用于框架搭建中表单配置的例子。
    最后，希望你们可以轻松快速搭建出自己需要的表单配置。
    跟着这些小贴士，你就能避开常见问题，享受丝滑愉悦的开发之旅！