這是乙個 vue 簡單元件, 用來實現乙個表單關聯的功能。例如一些條件生成：
像上面的上級選項為某個值之後，後面是根據這個值又首先新的選項。
class="about">
}span>
v-for="(tablevalueitem, tablevalueindex) in filteroptions">
:key="`el-cascader$`"
v-if="[`el-cascader`].includes(getitem(tablevalueindex).type)"
v-model="tablevalue[tablevalueindex]"
:options="getoptions(tablevalueindex)"
v-bind="getitem(tablevalueindex).props"
clearable
>
el-cascader>
v-else
:key="`el-select$`"
clearable
v-model="tablevalue[tablevalueindex]"
@change="(val) => change(val, tablevalueindex)"
:placeholder="getitem(tablevalueindex).placeholder"
:multiple="getitem(tablevalueindex).multiple"
:allow-create="getitem(tablevalueindex).allowcreate"
:filterable="getitem(tablevalueindex).allowcreate"
:default-first-option="getitem(tablevalueindex).allowcreate"
>
:key="item.value"
v-for="item in getoptions(tablevalueindex)"
:label="item.label"
:value="item.value"
>
el-option>
el-select>
:key="`span$`">}span>
template>
div>
template>
/**- 只有選擇父專案時才會出現子項
- 父項值改變時, 清空子項的值
*/export default ,
props: ,
},// 標籤資料, 可以優化為資料公用表, 然後在 roottable 中通過 optionssource 選項引用
tagdata: ,,,
,],},,
,],
},],},,
,,,,
],},,,
,,,,
,,,,
,,,,
],},,,
,,,,
],},,,
,,,],
},,,,
,,
],},,,
,,,,
],},
],},,,
,],
},];
},},
/**- 渲染表單的資料, 當上一級表單項有值後才會子項
pre - 在某個表單項前面
sub - 在某個表單項後面, 當表單項有值後才會顯示
options - 子項的可選項
type - 可以根據此 type 來渲染元件, 預設為普通 select, 可以優化為動態渲染元件以及新增元件 props 選項
- el-cascader 級聯選擇
label - 選項的 label
value - 選項的 value
multiple - 是否多選
allowcreate - 是否顯示清除
*/roottable: ,,],
},,,],
},],},,
,,
],},
],};
},},
},data() ;
},watch: ,
deep: true,
},},
created() ,
computed: );
console.log(`curitemcuritem`, curitem);
let list = this.tablevalue.length ? this.tablevalue : [undefined];
// 如果還有子項並且父選項有值時, 那麼就載入子項選擇器
if (
curitem.forceddisplay ||
(this.getoptions().length &&
[``, undefined].includes(list.slice(-1)[0]) === false)
) return list;
},sub() ;
return curitem.sub;
},},
methods: )
let curitem = this.roottable;
keys.foreach((key) => ) || {};
});return curitem;
},change(val, index) ,
getoptions(index) );
curitem.options = this[curitem.optionssource] || curitem.options;
console.log(`curitem.options`, curitem.options);
return curitem.options || ;
},getitem(index) );
return curitem;
},getsub(index)
const keys = this.tablevalue.slice(0, index + 1);
let curitem = this.getcuritem();
console.log(`getsubgetsubgetsubgetsub`, keys, curitem);
return curitem.sub;
},},
components: {},
};script>
Vue elementui 常用表單項正則校驗
import vue from vue export default ip位址校驗 ipaddressvalidator rule,value,callback elseif 2 5 0 5 0 4 d 0 1 d 2 5 0 5 0 4 d 0 1 d g test value else if 1...
Vue專案表單項很多 沒有繫結prop 表單重置
element ui的表單元件在使用時需要繫結prop屬性才能使用自帶的resetfield重置表單，如果遇到表單項很多，而且大部分不需要校驗，為了重置去乙個乙個設定prop的話很麻煩。所以可以使用object.assign來解決表單重置問題。我們可以通過this.data獲取當前狀態下的data，...
vue表單驗證元件 v verify plugin
版本已更新至2.0 說明 github npm npm install vue verify plugin 提交驗證之後的錯誤儲存在 vm.verify.errors 中，可自行列印出 vm.verify.errorarray 儲存上一次驗證的錯誤 配置傳入乙個物件 自定義驗證方法 blur boo...