组件库使用相关坑

element全局注册的dialog修改样式

因为diolog不是挂载在组件上，所以在scope里面修改样式是无效的

• 方法1:另外写一个不带scope的style，然后在里面修改dialog的样式，但是这样会影响其他的dialog
• 方法2:使用getContainer属性，属性值就是本页面外层的类名，这样就可以把该dialog挂载在组件上，然后使用::v-deep 对应组件类名就可以修改样式了

anted的 a-table

• 设置唯一的key，或者自定义key： :rowKey="(record, index) => index"
• 自定义列表内容：

      <template slot="firstExecutionDate" slot-scope="text, record">
        <span>{{record.executionTimeType==='absolute'? moment(record.executionTime).format('YYYY-MM-DD')
          : record.executionTag}}</span>
      </template>

  columns [{
          title: '首次触发时间',
          width: 200,
          dataIndex: 'firstExecutionDate',
          scopedSlots: { customRender: 'firstExecutionDate' },
        }],

自定义内容格式：
  columns [{
          title: '首次触发时间',
          width: 200,
          dataIndex: 'firstExecutionDate',
          customRender: (text) => {
            if (text === 'single') {
              return '单次'
            } else {
              return '重复'
            }
          },
        }],

anted的a-form

• a-select必须设置绑定的值为undefined，否则placeholder不显示
• 校验的message不能是''
• 设置表单水平布局： :layout="inline"

联级选择器

联级选择器需要option才能进行回显，有了被选择的数据和下拉的options，组件会自动回显该选择的省市。

树形组件

树形组件的回显依赖于设置的node-key，只需要传节点信息，不需要完整的树，对应node-key就会渲染，如果node-key是父节点，那么如果是父子关联则不判断children直接全选