gxwebsoft
68f4b2c35e
- 注释掉多个页面及组件中el-form-item的margin-bottom样式 - 增加车辆调度弹窗配置dialogCustomClass: 'vehicle-dispatch-dialog' - 在全局样式element-ui.scss中为.vehicle-dispatch-dialog内el-cascader设置宽度100% - 解决avue-crud弹窗append-to-body导致页面容器scoped样式无法命中问题 - 更新vite配置，将开发服务器端口修改为2889，代理目标指向远程地址 - 补充工程文档说明和样式调整原因分析
85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>cascader width check</title>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module">
|
|
import { createApp, h, ref, resolveComponent } from 'vue';
|
|
import ElementPlus from 'element-plus';
|
|
import 'element-plus/dist/index.css';
|
|
import Avue from '@smallwei/avue';
|
|
import '@smallwei/avue/lib/index.css';
|
|
import './src/styles/element-ui.scss';
|
|
|
|
const option = {
|
|
dialogCustomClass: 'vehicle-dispatch-dialog',
|
|
labelPosition: 'right',
|
|
labelWidth: 'auto',
|
|
addBtn: false,
|
|
editBtn: false,
|
|
delBtn: false,
|
|
viewBtn: false,
|
|
selection: false,
|
|
column: [
|
|
{ label: '车牌号', prop: 'plateNo', formslot: true, span: 12 },
|
|
{ label: '使用部门', prop: 'useDepartment', formslot: true, span: 12 },
|
|
],
|
|
};
|
|
|
|
const tree = [
|
|
{ id: 1, title: '桂物物流集团', children: [{ id: 2, title: '广西桂物物流服务集团有限公司' }] },
|
|
];
|
|
|
|
const Demo = {
|
|
data() {
|
|
return { option, form: {}, data: [], page: { currentPage: 1, pageSize: 10, total: 0 } };
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => this.$refs.crud.rowAdd());
|
|
},
|
|
render() {
|
|
const crud = resolveComponent('avue-crud');
|
|
return h(
|
|
crud,
|
|
{
|
|
ref: 'crud',
|
|
modelValue: this.form,
|
|
'onUpdate:modelValue': v => (this.form = v),
|
|
option: this.option,
|
|
data: this.data,
|
|
},
|
|
{
|
|
'plateNo-form': () =>
|
|
h(resolveComponent('el-autocomplete'), {
|
|
modelValue: this.form.plateNo,
|
|
'onUpdate:modelValue': v => (this.form.plateNo = v),
|
|
placeholder: '请选择车牌号',
|
|
fetchSuggestions: (q, cb) => cb([]),
|
|
}),
|
|
'useDepartment-form': () =>
|
|
h(resolveComponent('el-cascader'), {
|
|
modelValue: this.form.useDepartment,
|
|
'onUpdate:modelValue': v => (this.form.useDepartment = v),
|
|
options: tree,
|
|
props: { label: 'title', value: 'id', children: 'children', checkStrictly: true },
|
|
clearable: true,
|
|
filterable: true,
|
|
placeholder: '请选择使用部门',
|
|
}),
|
|
}
|
|
);
|
|
},
|
|
};
|
|
|
|
const app = createApp(Demo);
|
|
app.use(ElementPlus);
|
|
app.use(Avue);
|
|
app.mount('#app');
|
|
window.__app = app;
|
|
</script>
|
|
</body>
|
|
</html>
|