做專案的時候發現一種適用於自己的表單布局
優點：自適應
方便以後使用 記錄一下
1、form表單
2、柵格grid
<template
>
<
div>
<
form
ref="formvalidation"
：model
="formvalidation"
:label-width
="1"
>
<
row
type
="flex"
justify
="space-between"
>
<
col
span
="4"
>
<
form-item
label
="監區"
>
<
select
v-model
="formvalidation.area"
>
<
option
v-for
="(item,index) in arealist"
:key
="index"
>}
option
>
select
>
form-item
>
col>
<
col
span
="4"
>
<
form-item
label
="人員姓名"
>
<
input
v-model
="formvalidation.name"
>
form-item
>
col>
<
col
span
="7"
>
<
formitem
label
="datepicker"
>
<
row>
<
col
span
="11"
>
<
datepicker
type
="date"
placeholder
="select date"
v-model
="formvalidation.starttime"
>
datepicker
>
col>
<
col
span
="2"
style
="text-align: center"
>-
col>
<
col
span
="11"
>
<
timepicker
type
="time"
placeholder
="select time"
v-model
="formvalidation.endtime"
>
timepicker
>
col>
row>
formitem
>
col>
row>
<
row
type
="flex"
justify
="space-between"
>
<
col
span
="4"
>
<
form-item
label
="人員姓名"
>
<
input
v-model
="formvalidation.name"
>
form-item
>
col>
<
col
span
="4"
>
<
form-item
label
="人員姓名"
>
<
input
v-model
="formvalidation.name"
>
form-item
>
col>
<
col
span
="4"
>
<
form-item
label
="人員姓名"
>
<
input
v-model
="formvalidation.name"
>
form-item
>
col>
<
col
span
="7"
>
col>
row>
form
>
<
table
>
table
>
div>
template
>
<
script
>
export
default
,
],formvalidate:}}
}script
>
<
style
lang
="less"
>
style
>
ExtJs FormPanel 表單布局
formpanel有兩種布局 form和column，form是縱向布局，column為橫向布局。預設為後者。使用layout屬性定義布局型別。對於乙個複雜的布局表單，最重要的是正確分割，分割結果直接決定布局能否順利實現。如果不再使用預設布局，那麼我們必須為每乙個元素指定一種布局方式，另外，還必須遵...
Vue 表單控制項
textarea 略 input type text 略 單個input type checkbox 多個input type checkbox input type radio select select multiple multiple 有時候希望得到的表單控制項的值不是預設值，可以使用val...
vue 表單 繫結
vue的表單 使用v model 來繫結資料，具有雙向繫結資料的效果 雙向繫結，及不僅可以通過js運算元據顯示，並且可以通過input 等輸入框改變data checkbox 的資料繫結 通過data 的ture or false 來確定是否是選定項 選項2選項3 選項4選項5 測試得到，check...