html表单错位,【报bug】form表单组件在不同浏览器环境发生错位问题

近期在做钉钉PC端web应用开发过程中发现一个bug,form表单字段排序存在错位情况

avue版本：2.7.9，进过测试，所有字段添加排序后可正常显示，但是这种方式不是很灵活方便，建议能够优化处理一下

如下图：

上边图是在chrome浏览器中的正常显示，下图是在钉钉内置浏览器出现的错位，希望大佬能够修复一下


另外还有个小问题：

表单组件的cascader组件第一次选择会提示未选择


复现代码：

```

关闭

export default {

data() {

return {

item: {},

form: {

serviceMethod: [],

cfwzdz: [],

khwzdz: [],

lcys: undefined,

clfy: undefined,

qtjtss: '',

serviceContent: [],

dzwpmx: []

},

detailOption: {

menuBtn: false,

labelWidth: 108,

column: [{

label: "工单序号",

prop: "instanceId",

overHidden: true,

readonly: true,

span: 6,

width: 80

},

{

label: "工单编号",

prop: "workOrderCode",

overHidden: true,

readonly: true,

span: 6,

width: 160

},

{

label: "客户名称",

prop: "cusName",

overHidden: true,

readonly: true,

span: 6,

width: 150

},

{

label: "所属客服部",

prop: "cusAttrDept",

overHidden: true,

readonly: true,

span: 6,

width: 110

},

{

label: "报修人",

prop: "applicant",

overHidden: true,

readonly: true,

span: 6,

width: 80

},

{

label: "报修人电话",

prop: "applicantPhone",

overHidden: true,

readonly: true,

span: 6,

width: 100

},

/* {

label: "报修人性质",

prop: "applicantType",

overHidden: true,

readonly: true,

span: 6,

width: 90

}, */

{

label: "工单类型",

prop: "repairType",

overHidden: true,

readonly: true,

span: 6,

width: 80

},

{

label: "工单状态",

prop: "workOrderState",

overHidden: true,

readonly: true,

span: 6,

width: 80

},

{

label: "报修时间",

prop: "creatTime",

overHidden: true,

readonly: true,

span: 6,

width: 135

},

{

label: "报修内容",

prop: "repairContent",

overHidden: true,

readonly: true,

tip: '',

span: 6,

width: 140

},

{

label: "报修要求",

prop: "repairRequest",

overHidden: true,

readonly: true,

tip: '',

span: 6,

width: 100

},

{

label: "报修图片",

prop: "appBxImgList",

type: 'upload',

dataType: 'string',

listType: 'text',

overHidden: true,

disabled: true,

span: 6,

width: 100

},

]

},

formOption: {

emptyBtn: false,

// menuBtn:false,

labelWidth: 108,

column: [{

title: '分割线',

prop: 'line',

component: 'el-divider',

span: 24,

labelWidth: '0px'

},

{

label: "服务方式",

prop: "serviceMethod",

type: "cascader",

props: {

label: 'name',

value: 'name'

},

rules: [{

required: true,

message: '请选择服务方式',

}],

dicData: [],

overHidden: true,

span: 6,

width: 100

},

{

label: "交通方式",

prop: "qtjtss",

display: false,

span: 6,

width: 100

},

{

title: '分割线',

prop: 'line',

component: 'el-divider',

span: 24,

labelWidth: '0px'

},

{

label: "出发位置",

prop: "cfwzdz",

type: 'map',

display: false,

//高德初始化参数

params: {

zoom: 10,

zoomEnable: false,

dragEnable: false,

},

component: 'avue-input-map',

overHidden: true,

span: 6,

width: 100

},

{

label: "客户位置",

prop: "khwzdz",

type: 'map',

display: false,

//高德初始化参数

params: {

zoom: 10,

zoomEnable: false,

dragEnable: false,

},

component: 'avue-input-map',

overHidden: true,

span: 6,

width: 100

},

{

label: "路程用时(H)",

prop: "lcys",

type: 'number',

display: false,

// format: 'HH:mm:ss',

// valueFormat: 'timestamp',

span: 6,

width: 100

},

{

label: "差旅费用(元)",

prop: "clfy",

type: 'number',

display: false,

overHidden: true,

span: 6,

width: 100

},

{

title: '分割线',

prop: 'line-po',

component: 'el-divider',

span: 24,

display: false,

labelWidth: '0px'

},

{

label: "服务性质",

prop: "serviceNature",

type: "cascader",

props: {

label: 'name',

value: 'name'

},

rules: [{

required: true,

message: '请选择服务性质',

}],

display: true,

dicData: [],

span: 6,

width: 100

},

{

label: "收费金额(元)",

prop: "sfje",

type: 'number',

overHidden: true,

display: false,

span: 6,

width: 100

},

{

label: "商机编号",

prop: "sjbh",

overHidden: true,

display: false,

span: 6,

width: 100

},

{

title: '分割线',

prop: 'line',

component: 'el-divider',

span: 24,

labelWidth: '0px'

},

{

label: '服务内容',

prop: 'serviceContent',

type: 'dynamic',

span: 24,

children: {

align: 'center',

headerAlign: 'center',

labelWidth: 145,

rowAdd: () => {

// this.$message.success('新增回调');

// done();

this.formServiceContentDialogVisible = true;

},

rowDel: (row, done) => {

this.$message.success('删除回调' + JSON.stringify(row));

done();

},

column: [{

label: '服务类型',

prop: "F_FWDL",

type: "cascader",

props: {

label: 'funName',

value: 'funId'

},

rules: [{

required: true,

message: '请选择服务类型及产品线',

}],

dicData: []

},

{

label: '系统类型',

prop: "F_XTLX",

type: 'radio',

props: {

label: 'funName',

value: 'funId'

},

rules: [{

required: true,

message: '请选择系统类型',

}],

dicData: [],

span: 24

},

{

label: '其他类型',

prop: "F_QTXTLX",

},

{

label: '软件版本',

prop: "F_RJBB",

},

{

label: '问题现象',

prop: "F_WTXX",

type: 'checkbox',

props: {

label: 'funName',

value: 'funId'

},

rules: [{

required: true,

message: '请选择问题现象',

}],

dicData: [],

span: 24

},

{

label: '其他现象',

prop: "F_QTXX",

},

{

label: '问题原因',

prop: "F_WTYY",

type: 'radio',

props: {

label: 'funName',

value: 'funId'

},

rules: [{

required: true,

message: '请选择问题原因',

}],

dicData: [],

span: 24

},

{

label: '其他原因',

prop: "F_QTYY",

span: 24

},

{

label: '解决办法/工作原因',

prop: "F_JJBF",

type: 'radio',

props: {

label: 'funName',

value: 'funId'

},

rules: [{

required: true,

message: '请选择解决办法',

}],

dicData: [],

span: 24

},

{

label: '其他办法/其他工作',

prop: "F_QTBF",

span: 24

},

{

label: '问题数量',

prop: "F_WTSl",

},

{

label: '服务用时',

prop: "F_FWYS",

},

{

label: '解决途径',

prop: "F_JJTJ",

type: 'radio',

props: {

label: 'name',

value: 'dicId'

},

rules: [{

required: true,

message: '请选择解决办法',

}],

dicData: [],

span: 24

},

{

label: '补充说明',

prop: "F_BCSM",

type:'textarea'

},

]

}

},

{

title: '分割线',

prop: 'line',

component: 'el-divider',

span: 24,

labelWidth: '0px'

},

{

label: "服务图片",

prop: "name",

dataType: 'string',

type: 'upload',

action: '/api/blade-resource/oss/endpoint/put-file',

propsHttp: {

res: 'data',

url: 'link',

},

span: 24,

listType: 'picture-card',

width: 100

},

{

label: "回访建议",

prop: "visitOpinion",

type: 'radio',

props: {

label: 'value',

value: 'value'

},

dicData: [{

value: '回访'

}, {

value: '不回访'

}],

span: 13,

width: 100

},

{

label: "处理结果",

prop: "content",

type: 'textarea',

overHidden: true,

span: 13,

width: 100

},

{

label: '带走物品',

prop: 'dzwpmx',

type: 'dynamic',

span: 13,

children: {

align: 'center',

headerAlign: 'center',

emptyBtn: false,

submitText: '添加',

rowAdd: (done) => {

this.$message.success('新增回调');

// this.formTakeAwayDialogVisible = true;

done();

},

rowDel: (row, done) => {

this.$message.success('删除回调' + JSON.stringify(row));

done();

},

column: [{

label: '物品名称',

prop: "wpmc",

// rules: [{

// required: true,

// message: '请选择选择框2',

// }]

}, {

width: 180,

label: '物品数量',

prop: "count",

type: 'number',

// rules: [{

// required: true,

// message: "请输入字典名称3"

// }]

}]

}

}

]

},

};

},

computed: {

},

watch: {

},

mounted() {},

methods: {

}

};

```