Vue基础明晰

Vue基础明晰

​ Vue长期处于会写而不去理解，此文简单梳理一下。

​ 一个Vue页面基本分为两部分：1.搜索、按钮等为主的表单域 2.展示数据库信息的表格域

1. Form表单：

   

   • 一个Form表单其下为多个form-item，各搜索输入框都包裹在form-item里。
   • 通常form通过v-model绑定值如queryParams，其下的form-item的label为各搜索框的前面文字值，包裹其内的输入框通过v-model绑定form绑定的对象的种种属性。 例如queryParams.month。绑定的各属性需要声明于数据域，通常以对象的方式存在如queryParams：{month：‘’，name：‘’}

2. Table表格：

   • 一个Table表格的子元素为table-column，每一项为一个表格的一列，table通过：data来绑定某一对象的集合。

   • table-column的label为每一列表头文字，key为绑定对象的属性，prop为传值子组件，二者统一即可。

   • 要在Table展示中修改某一对象属性，即在表格中加入输入框，选择框等，需要在此列table-column的包裹中，创建一个template域，以v-slot来绑定。

     输入框/选择框等通过v-model绑定scope.row.xmqk即可获知该元素在哪一行的哪个属性，从而与具体元素绑定，@change传此行-集合中的单个对象 相关值即可更改。

     无论是在主组件中亦或dialog里，都经常存在form或者table，究其本质即可-form为表单，作数据的提交（提交搜索条件、要更改的对象属性值等等），table为表格，作信息展示。