## XTable
```
options: {
  // 表单类型 dialog / sidebar
  formType: 'dialog',
  // 表单宽度 sidebar: 默认30% ; dialog: sm、md（默认）、“lg”或“xl”
  formWidth: 'md',
  // 卡片风格表格 
  cardProps: {  
    // header：图标 
    icon: '',
    // header：名称 
    name: '',
  },
  // 表格是否显示行选择checkbox
  rowSelectable: false,
  rowSelectedOkBtnShow:  false, //显示行选择确认按钮
  // 行选择是否为单选
  rowSingleSelectable: false,
  // 是否点击空白处关闭: 新增、编辑不能关闭，查看可关闭
  cancelOnOutside: true,
  // 搜索条件超过两个是否折叠
  searchFold: true,
  lableVertical: true,
  // 新增按钮
  addBtn: true,
  // 只有新增时 是否正常大小 还是 撑满全部 默认撑满全部
  normalAddBtn: false,
  // 导入按钮
  importBtn: true,
  // 导出按钮
  exportBtn: true,
  // 打印按钮
  printBtn: true,
  // 是否显示重置
  resetBtn: true,
  // 默认行操作： 查看、编辑、删除 : url存在时点击直接跳转 不发送事件
  // url: 使用router跳转；website跳转外链, tip: hover时显示 ,target : 点击时作用的组件id，permission: 对应权限标识
  actions: [{ action: 'view', name: '查看', icon: 'EyeIcon',url: undefined, website:undefined }, { action: 'edit', name: '编辑', icon: 'EditIcon' },
                   { action: 'delete', name: '删除', icon: 'Trash2Icon' }],
  // 行操作过滤器
  actionFilter: (action, row) => true,
  // 表单分组展示：collapse(折叠面板) / step(分布表单)
  formGroupType: 'collapse',
  // 是否展开表单分组（分组使用折叠面板时使用）
  collapseExpandAll: true,
  // card模式下 每个卡片的宽度
  cardCols: 4,
  // card模式下 每个卡片中列的宽度
  cardColumnCols: 4,
  // 是否隐藏表格样式切换按钮
  hideStyleSwitch: false,
  // form提示内容
  formTip: '',
  // form提示内容主题色
  formTipVariant: 'primary',
  columns: [{
      //  ---------------------------------- 通用属性 ----------------------------------
      // 名称
      label: '', 
      // 默认类型: input select time date datetime link textarea checkbox radio upload switch repeater datetimerange tree icons(图标选择)
      type: 'input', 
      // 数据双向绑定字段
      prop: '',
      // 是否在搜索条件中显示
      searchShow: true,
      // 是否在表格中显示
      rowShow: true,
      // 是否在查看form中显示
      viewShow: true,
      // 是否在新增form中显示
      addShow: true,
      // 是否在新增form中禁止编辑
      addDisable: false,
      // 是否在编辑form中显示
      editShow: true,
      // 字段说明信息
      tip: '',
      // 是否在编辑form中禁止编辑
      editDisable: false,
      // 是否显示label
      labelShow: true,
      placeholder: '',
      // row自定义样式
      rowCls: '', 
      // 表格customXForm（全局条件）的与条件，
      // 比如编辑不想使用自定义form，新增希望使用， 此时只需将编辑的customXForm 设置为false即可
      customXForm: true,

      // ---------------------------------- 表格属性 ----------------------------------
      // 是否显示操作栏
      showActions: true,
      // 对应type = time / date / datetime 日期时间格式化
      format: undefined,
      // 对应type = select / radio / checkbox 字典类型是否使用tag样式
      rowSelect: false,
      // 是否将字典类型显示为dot样式
      rowSelectDot: false,
      // 对应type = select / radio / checkbox select类型颜色 默认primary
      selectVariant: (propValue) => { return 'primary' }，
      // 支持使用占位符 如{id} 取行数据的id
      linkUrl: undefined，
      // 卡片列表 默认feather icon
      defaultIcon:  '',
      // 卡片列表 默认icon url
      defaultIconUrl:  '',
      // 卡片列表 默认icon text
      defaultIconText:  'CX',
      // 卡片列表 默认icon颜色
      defaultIconVariant:  'light-primary',
      // card模式下 每个卡片中列的宽度
      cardColumnCols: 4,
      
      // el-datepick组件
      pickerOptions: {}, 
      
      //  ---------------------------------- form和action属性 ----------------------------------
      // 搜索栏初始值
      searchValue: undifined;
      // 搜索类型目前仅支持 input select
      // 对应type = input 输入掩码 
      mask: undefined,
      // 对应type = select / radio / checkbox 字典数据 
      dictData: [],
      dictUrl: undefined,
      // 获取字典label
      getDictLabel: (option) => {
        if (typeof option === 'object') {
          if (!option.hasOwnProperty(this.label)) {
            return console.warn(
              `[vue-select warn]: Label key "option.${this.label}" does not` +
              ` exist in options object ${JSON.stringify(option)}.\n` +
              'https://vue-select.org/api/props.html#getoptionlabel'
            )
          }
          return option[this.label]
        }
        return option;
      },
      // 字典选项选中监听
      onDictSelected: (option, colums, formData, formType) => {}，
      // switch选项选中监听
      onSwitchChange: (data, colums) => {}，
      // el tree 字典值
      options:  [{
         value: 'zhinan',
         label: '指南',
         children: [{
           value: 'shejiyuanze',
           label: '设计原则'
          }]
       }],
      // 字典对应显示的名字和值
      props: {
        label: 'label', 
        value: 'value',
        checkStrictly: false, // element专用
        children:  'children', // element专用
        multiple: false, // 是否多选
        collapseTags: false, // 多选是否折叠
      }
      // 对应type = textarea 行数  默认3行
      rows: 3,
      // 上传组件属性: 参考el-upload
      upload: {
        // 上传的地址
        url: '',
        // 设置上传的请求头部
        headers: null,
        // 提示内容
        tip: '',
        // 上传时附带的额外参数
        data: null,
        // 上传的文件字段名
        name: 'file',
        // 接受上传的文件类型
        accept: null,
        // 文件数量
        limit: 1,
        // 上传文件之前的钩子
        beforeUpload: file => {},
        // 文件列表移除文件时的钩子
        onRemove: (file, fileList) => {},
        // 文件上传成功时的钩子
        onSuccess: (response, data, file, fileList) => {},
        // 文件上传失败时的钩子
        onError: (err, file, fileList) => {},
        // 文件超出个数限制时的钩子 使用默认实现
        // onExceed: (files, fileList) => {},
      },
      // 子项 忽略父组件type属性 同上
      children: [{}]
  }]       
}
```
```
Events: {
  // 表单弹出前事件
  beforeShow({ isAdd, isEdit, isView }, formData, coloumns),
  // 行选择事件
  rowSelected(rows)
}

```
## XElTable独有属性
```
options: {
  rowKey: '', // 行key
  contentHeight: null, //表格高度，超出显示滚动条
  treeProps: {
    children: 'children', // 当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时
    hasChildren: 'hasChildren' // 指定哪些行是包含子节点
  },
  columns: [{
    fixed: false, // true, left, right 列是否固定在左侧或者右侧，true 表示固定在左侧
 
  }]
}
```