# 示例 ---- 表格头部查询

提示

项盒子的宽度 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>
上次更新时间: 2019-11-29 5:44:11 PM