# 示例 ---- 表格头部查询
提示
项盒子的宽度 width
和 内容宽度 inputWidth
, 灵活赋值可以两个下拉框并在一起的效果
# 数据结构
<script>
export default {
data() {
return {
formAttr: { title: '在线服务查询', size: 'small' },
itemAttr: [
{ label: '在线咨询编号:', type: 'input', key: 'no', maxlength: 50 },
{
label: '等待时长:',
type: 'select',
key: 'waitSymbol',
width: '110px',
inputWidth: '105px'
},
{ type: 'select', key: 'waitTime', width: '110px', inputWidth: '105px' },
{ label: '咨询创建时间:', type: 'datetimerange', key: 'createTime' },
{
label: '会话时长:',
type: 'select',
key: 'sessionSymbol',
width: '110px',
inputWidth: '105px'
},
{ type: 'select', key: 'sessionTime', width: '110px', inputWidth: '105px' },
{ label: '会话状态:', type: 'select', key: 'sessionStatus' },
{ label: '归属客服:', type: 'input', key: 'name', maxlength: 100 },
{ label: '紧急程度:', type: 'select', key: 'emergencyLevel' },
{ label: '咨询详情:', type: 'input', key: 'detail', maxlength: 2000 }
],
types: {
waitSymbol: [
{ value: '>', label: '大于' },
{ value: '<', label: '小于' },
{ value: '=', label: '等于' }
],
waitTime: [
{ value: 1, label: '1分' },
{ value: 2, label: '2分' },
{ value: 3, label: '3分' },
{ value: 10, label: '10分' },
{ value: 20, label: '20分' },
{ value: 30, label: '30分' }
],
sessionStatus: [
{ value: 1, label: '已结束' },
{ value: 2, label: '未结束' }
],
emergencyLevel: [
{ value: 1, label: '一般' },
{ value: 2, label: '紧急' },
{ value: 3, label: '非常紧急' }
]
}
}
},
mounted() {
// 注意数组要通过拷贝
this.types['sessionSymbol'] = this.types.waitSymbol.slice()
this.types['sessionTime'] = this.types.waitTime.slice()
},
methods: {
submitForm() {
this.$refs['formCompEl']
.submitForm()
.then(res => {
this.$alert(res)
})
},
resetForm() {
this.$refs['formCompEl'].resetForm()
},
}
}
</script>