# my-table
### **my-table 调用方式**
> 此组件基于elementui的table二次封装 适用于表格展示
``` Vue
<template>
  <div class="table">
    <h3 style="text-align: center">所有选中的id：{{ defaultselectId }}</h3>
    <my-table
      ref="tableRef"
      :data.sync="data"
      :maxHeight="maxHeight"
      :border="border"
      :summary="summary"
      :columList.sync="columList"
      :operate="operate"
      :total="total"
      :rowKey="rowKey"
      :paginationMarginTop="paginationMarginTop"
      :spanMethod="spanMethod"
      :summaryMethod="summaryMethod"
      :fullscreenLoading="loading"
      :headerCellStyle="headerCellStyle"
      :cellStyle="cellStyle"
      :highlightCurrentRow="highlightCurrentRow"
      @handleCurrentChange="handleCurrentChange"
      @select="select"
      @singleChange="singleChange"
      @rowClick="rowClick"
    >
      <template slot="expandSlot" slot-scope="{ props }">
        <el-form>
          <el-form-item label="商品名称">
            <span>{{ props.row.moneyNum }}</span>
          </el-form-item>
        </el-form>
      </template>
      <el-table-column
        label="插槽"
        min-width="120"
        show-overflow-tooltip
        slot="slotName"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
          <el-tag size="mini" style="margin-left: 5px">标签</el-tag>
        </template>
      </el-table-column>
    </my-table>
  </div>
</template>
<script>
import MyTable from "@/packages/table/src/my-table.vue";
export default {
  name: "Table",
  components: {
    MyTable
  },
  data() {
    return {
      data: [],
      // singleSelectionProp: "id",
      total: 0,
      maxHeight: "552px",
      paginationMarginTop: "20px",
      rowKey: "id",
      border: false,
      summary: true,
      defaultselectId: [],
      loading: false,
      columList: [
        // {
        //   width: "50",
        //   type: "selection",
        //   hide: false
        // },
        // {
        //   width: "50",
        //   type: "index",
        //   hide: false
        // },
        {
          width: "50",
          scopeType: "singleSelection",
          tooltip: false,
          disabled: false,
          disabledColProp: "singleSelectionDisabled"
        },
        {
          type: "expand",
          width: "200",
          // expandSoltName: "expandSlot" // 扩展行使用插槽

          // 扩展行使用二级表格
          rowKey: "planNo",
          expandDataName: "expandData",
          expandColumList: [
            {
              width: "50",
              scopeType: "singleSelection",
              tooltip: false
            },
            {
              type: "expand",
              width: "200",
              expandDataName: "expandData",
              expandColumList: [
                {
                  prop: "planNo",
                  label: "计划编号",
                  minWidth: "100"
                },
                {
                  prop: "planName",
                  label: "计划名称",
                  minWidth: "100"
                },
                {
                  prop: "planName",
                  label: "计划名称",
                  minWidth: "100"
                },
                {
                  prop: "planName",
                  label: "计划名称",
                  minWidth: "100"
                },
                {
                  prop: "planName",
                  label: "计划名称",
                  minWidth: "100"
                },
                {
                  prop: "planName",
                  label: "计划名称",
                  minWidth: "100"
                }
              ],
              expandOperate: {
                align: "center",
                operateArr: [
                  {
                    label: "查看",
                    icon: "el-icon-edit",
                    class: "edit",
                    show: () => {
                      return true;
                    },
                    fn: this.show
                  }
                ]
              }
            },
            {
              prop: "planNo",
              label: "计划编号",
              minWidth: "100"
            },
            {
              prop: "planName",
              label: "计划名称",
              minWidth: "100"
            },
            {
              prop: "planName",
              label: "计划名称",
              minWidth: "100"
            },
            {
              prop: "planName",
              label: "计划名称",
              minWidth: "100"
            },
            {
              prop: "planName",
              label: "计划名称",
              minWidth: "100"
            },
            {
              prop: "planName",
              label: "计划名称",
              minWidth: "100"
            }
          ],
          expandOperate: {
            align: "center",
            operateArr: [
              {
                label: "查看",
                icon: "icon-tuBiao_zhongbiaoluru",
                class: "edit",
                disabled: () => {
                  return true;
                },
                fn: this.show
              }
            ]
          }
        },
        {
          prop: "id",
          label: "id",
          width: "100",
          headerAlign: "center",
          children: [
            {
              prop: "id",
              label: "id1",
              width: "100"
            },
            {
              prop: "id",
              label: "id2",
              width: "100"
            }
          ]
        },
        {
          prop: "timePicker",
          label: "时间选择器",
          width: "200",
          disabled: true,
          scopeType: "timePicker",
          change: (scope, row, index) => {
            console.log(scope, row, index);
          }
        },
        {
          prop: "datePicker",
          label: "日期选择器",
          width: "200",
          scopeType: "datePicker",
          datePickerType: "date",
          blur: (scope, row, index) => {
            console.log(scope, row, index);
          }
        },
        {
          prop: "moneyNum",
          label: "金额",
          width: "100",
          scopeType: "money"
        },
        {
          prop: "number",
          label: "数值",
          width: "100",
          scopeType: "number",
          unit: "元",
          inputChange: val => {
            console.log(val);
          }
        },
        {
          prop: "textInput",
          label: "输入框",
          width: "300",
          scopeType: "text",
          textLabel: "textInputLabel",
          size: "small",
          inputFn: val => {
            console.log("输入框", val);
          }
        },
        {
          label: "属性",
          width: "900",
          headerAlign: "center",
          hide: false,
          children: [
            {
              prop: "progress",
              label: "进度条",
              width: "300",
              scopeType: "progress",
              progressWidth: "100px",
              showText: true
              // hide: true
            },
            {
              prop: "radio",
              label: "开关",
              width: "300",
              scopeType: "radio",
              radioLabel: true
            },
            {
              prop: "rate",
              label: "评分",
              width: "300",
              scopeType: "rate",
              showScore: true
            }
          ]
        },
        {
          prop: "textInput",
          tooltip: false,
          label: "输入框",
          width: "300",
          scopeType: "textarea",
          textLabel: "textInputLabel",
          size: "small",
          formatter: val => {
            console.log(val);
            return val;
          },
          inputFn: val => {
            console.log("输入框", val);
          },
          inputFocus: val => {
            console.log("inputFocus", val);
          },
          inputBlur: val => {
            console.log("inputBlur", val);
          }
        },
        {
          prop: "contractName",
          scopeType: "select",
          label: "合同名称",
          width: "250",
          size: "small",
          filterable: false,
          options: [
            {
              label: "选项1",
              value: "1"
            },
            {
              label: "选项2",
              value: "2"
            },
            {
              label: "选项3",
              value: "3"
            }
          ],
          labAttr: "label",
          valueAttr: "value"
        },
        {
          prop: "button",
          label: "按钮",
          width: "200",
          scopeType: "button",
          buttonType: "text",{
          prop: "button",
          label: "按钮",
          width: "200",
          scopeType: "button",
          buttonType: "text",
          disabled: (index, row) => {
            console.log("buttonDisabledFn", index, row);
            return true;
          },
          disabledColProp: "buttonDisabled",
          handleClick: (index, row) => {
            console.log(index, row);
          }
        },
          handleClick: (index, row) => {
            console.log(index, row);
          }
        },
        {
          prop: "result",
          label: "结果",
          width: "300",
          iconStyle: "iconStyle",
          scopeType: "result",
          resultClass: "resultClass",
          resultOptions: {}
        },
        {
          prop: "icon",
          label: "图标",
          width: "150",
          scopeType: "iconfont"
        },
        {
          label: "插槽",
          slotName: "slotName"
        }
      ],
      tableData: [
        {
          id: 1,
          number: 10000,
          timePicker: "09:30",
          progress: 0,
          single: 1,
          singleSelectionDisabled: true,
          radio: true,
          textInput: 1000000,
          textInputLabel: "数字输入",
          contractName: "2",
          rate: 4.7,
          button: "测试",
          buttonDisabled: false,
          result: "CXTJ",
          iconStyle: {
            width: "10px",
            height: "10px",
            backgroundColor: "red",
            borderRadius: "50%"
          },
          resultClass: "green",
          icon: "icon-tuBiao_zhongbiaoluru",
          moneyNum: "8500000.2",
          expandData: [
            {
              planNo: "planNo1",
              planName: "planName1",
              expandData: [
                {
                  planNo: "planNo1",
                  planName: "planName1"
                },
                {
                  planNo: "planNo2",
                  planName: "planName2"
                },
                {
                  planNo: "planNo3",
                  planName: "planName3"
                }
              ]
            },
            {
              planNo: "planNo2",
              planName: "planName2",
              expandData: [
                {
                  planNo: "planNo1",
                  planName: "planName1"
                },
                {
                  planNo: "planNo2",
                  planName: "planName2"
                },
                {
                  planNo: "planNo3",
                  planName: "planName3"
                }
              ]
            },
            {
              planNo: "planNo3",
              planName: "planName3"
            }
          ]
        },
        {
          id: 2,
          moneyNum: 111111.123,
          progress: 10,
          radio: false,
          contractName: "2",
          textInput: "-45℃",
          textInputLabel: "温度",
          result: "BH",
          resultClass: "red",
          // children: [
          //   {
          //     id: 21,
          //     progress: 20,
          //     radio: false
          //   },
          //   {
          //     id: 22,
          //     progress: 30,
          //     radio: false
          //   }
          // ]
          expandData: [
            {
              planNo: "planNo1",
              planName: "planName1",
              expandData: [
                {
                  planNo: "planNo1",
                  planName: "planName1"
                },
                {
                  planNo: "planNo2",
                  planName: "planName2"
                },
                {
                  planNo: "planNo3",
                  planName: "planName3"
                }
              ]
            },
            {
              planNo: "planNo2",
              planName: "planName2",
              expandData: [
                {
                  planNo: "planNo1",
                  planName: "planName1"
                },
                {
                  planNo: "planNo2",
                  planName: "planName2"
                },
                {
                  planNo: "planNo3",
                  planName: "planName3"
                }
              ]
            },
            {
              planNo: "planNo3",
              planName: "planName3"
            }
          ]
        },
        {
          id: 3,
          single: 0,
          progress: 40,
          radio: false,
          button: "测试2"
        },
        {
          id: 4,
          progress: 50,
          radio: true,
          contractName: "2"
        },
        {
          id: 5,
          progress: 60,
          radio: false,
          contractName: "1"
        },
        {
          id: 6,
          progress: 70,
          radio: false,
          contractName: "3"
        },
        {
          id: 7,
          progress: 80,
          radio: true,
          contractName: "3"
        },
        {
          id: 8,
          progress: 90,
          radio: true,
          contractName: "3"
        },
        {
          id: 9,
          progress: 100,
          radio: false,
          contractName: "3"
        },
        {
          id: 10,
          progress: 15,
          radio: false,
          contractName: "3"
        },
        {
          id: 11,
          progress: 25,
          radio: false,
          contractName: "3"
        },
        {
          id: 12,
          progress: 35,
          radio: false,
          contractName: "3"
        }
      ],
      operate: {
        // width: "300",
        align: "center",
        operateArr: [
          {
            label: "中标录入",
            icon: "icon-tuBiao_zhongbiaoluru",
            class: "danger",
            show: row => {
              return row.id != 1;
            },
            fn: this.warning
          },
          {
            label: "编辑",
            // icon: "el-icon-edit",
            class: "edit el-icon-edit",
            show: () => {
              return false;
            },
            fn: this.edit
          },
          {
            label: "删除",
            icon: "icon-tuBiao_zhongbiaoluru",
            class: "danger",
            show: () => {
              return false;
            },
            fn: this.edit
          }
        ]
      },
      userResource: [
        "PM_BIDDING_ANCLINCH",
        "PM_BIDDING_ANEDIT",
        "PM_BIDDING_ANDEL",
        "PM_BIDDING_ANCHEHUI"
      ],
      resultOptions: [
        {
          text: "重新提交",
          value: "CXTJ"
        },
        {
          text: "不通过",
          value: "BH"
        },
        {
          text: "同意",
          value: "SP"
        },
        {
          text: "提交",
          value: "TJ"
        }
      ],
      // 在多表头时border设置无效，手动设置样式
      headerCellStyle: {
        borderRight: 0
      },
      cellStyle: {
        borderRight: 0
      },
      highlightCurrentRow: false
    };
  },
  beforeCreate() {}, //生命周期 - 创建之前
  updated() {
    // console.timeEnd("table加载耗时：");
  }, //生命周期 - 更新之后
  created() {
    this.total = this.tableData.length;
    this.handleCurrentChange();
    this.columList[7].resultOptions = this.getResultOptions(this.resultOptions);
    // this.loading = true;

    // setInterval(() => {
    //   let bool = Boolean(parseInt(Math.random() * 100) % 2);
    //   console.log("bool", bool);
    //   this.columList[8].hide = bool;
    // }, 500);
  },
  mounted() {},
  methods: {
    singleChange(row) {
      console.log(row);
    },
    // 合计行计算呢规则
    summaryMethod(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "N/A";
        }
      });
      return sums;
    },
    // 点击选中
    select(selection, row) {
      if (this.defaultselectId.includes(row.id)) {
        this.defaultselectId = this.defaultselectId.filter(item => {
          return item != row.id;
        });
      } else {
        this.defaultselectId.push(row.id);
      }
    },
    rowClick(row) {
      if (this.defaultselectId.includes(row.id)) {
        this.defaultselectId = this.defaultselectId.filter(item => {
          return item != row.id;
        });
      } else {
        this.defaultselectId.push(row.id);
      }
      this.defaultChecked(row);
    },
    // 设置默认选中
    defaultChecked(val) {
      this.$refs.tableRef.toggleRowSelection(val);
    },
    // 切换分页
    handleCurrentChange(val) {
      val = val || 1;
      let i = (val - 1) * 10; //起始下标
      let j = val * 10; //结尾下标
      if (j > this.total) {
        j = this.total;
      }
      this.data = [];
      // 数据渲染
      for (i; i < j; i++) {
        this.data.push(this.tableData[i]);
        if (this.defaultselectId.includes(this.tableData[i].id)) {
          this.defaultChecked(this.tableData[i], true);
        }
      }
    },
    warning() {
      console.log("中标录入");
    },
    edit(index, row, buttonIndex) {
      console.log("编辑", index, row, buttonIndex);
    },
    show() {
      this.$message("查看");
    },
    spanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 4) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex === 5 || rowIndex === 6) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    getResultOptions(val) {
      let obj = {};
      for (let i of val) {
        obj[i.value] = i.text;
      }
      // console.log(obj);
      return obj;
    }
  }
};
</script>
<style scoped>
.green {
  color: green;
}
.red {
  color: red;
}
.table {
  overflow: hidden;
}
</style>

```

### **Attributes**
> my-table

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
data|表格数据|Array|-|[]
columList|表格配置项|Array|-|[]
operate|表格操作项|Object|-|{}
height|表格高度|string|-|null
maxHeight|最大高度|String|-|null
headerCellStyle|表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。|Function({row, column, rowIndex, columnIndex})/Object|-|-
rowStyle|表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style|Function({row, rowIndex})/Object，需注意：为实现特殊单元格留白区域不触发点击事件，如果有调整rowStyle和cellStyle的高度，需同步调整stop_propagation的高度|-|{ height: "48px" }
cellStyle|单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style|Function({row, rowIndex})/Object|-|{ padding: "0" }
border|是否带有纵向边框|Boolean|true/false|false
defaultExpandAll|当table存在展开行时有效,是否展开所有行|Boolean|true/false|false
rowKey|当table存在展开行、单选行时必填|Function(row)/String|-|id
spanMethod|合并行列|Function({ row, column, rowIndex, columnIndex })|-|-
summary|是否显示合计行|Boolean|true/false|false
summaryMethod|自定义合计行方法|Function({ columns, data }{return []})|-|-
currentPage|默认页|Number|-|0
paginationMarginTop|分页组件的marginTop|String|-|null
pageSize|单页展示的数据行数|Number|-|10
loading|表格局部加载动画|Boolean|true/false|false
fullscreenLoading|表格全局加载动画|Boolean|true/false|false
loadingText|动画文字|String|-|"加载中"
highlightCurrentRow|表格点击时行高亮显示|Boolean|true/false|false

> `columList [Array<Object>]数组对象`

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
type|对应列的类型，selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮|String|selection/index/expand|-
expandDataName|type为expand时展开列数据的字段名|String|-|-
expandColumList|type为expand时展开列的属性配置，配置项与columList一致|[Array<Object>]|-|-
expandOperate|type为expand时展开列的操作属性配置，配置项与operate一致|[Object<Array<Object>>]|-|-
prop|对应列的字段名|String|-|-
label|显示的标题|String|-|-
width|对应列的宽度|String|-|-
minWidth|对应列最小宽度，会把剩余宽度按比例分配给设置了minWidth的列|String|-|140
headerAlign|表头对齐方式,如不设置，则使用表格的对齐方式|String|left/center/right|-
align|表格对齐方式|String|left / center / right|left
formatter|用来格式化内容|Function(row, column, cellValue, index)|-|-
tooltip|当内容过长被隐藏时显示tooltip提示|Boolean|true/false|true
scopeType|自定义类型, scopeType:"money"时，将对应的金额转换为千位符，scopeType:"singleSelection"时，可设置radio=""来取消单选框的选中效果|String|radio / progress / select / number / rate / text / textarea /  selectObj / button / iconfont / result / money / singleSelection / timePicker / datePicker|-
disabled|是否禁用|Boolean|true / false|false
disabledColProp|控制某行禁用的字段名，由data中每行数据的该项来控制是否禁用|String|-|-
readonly|scopeType为text / textarea / timePicker时，是否只读|Boolean|true / false|false
textLabel|scopeType为text时，label的字段名|String|-|-
size|scopeType为text / number / select / radio / timePicker时组件的size|String|medium / small / mini|-
maxlength|scopeType为number / text / textarea时的最大输入长度|Number|-|12 / 50 / 200
rows|scopeType为textarea时，设置输入框行数|Number|-|3
prefixIcon|scopeType为text / textarea时，输入框头部图标|String|-|-
suffixIcon|scopeType为text / textarea时，输入框尾部图标|String|-|-
showWordLimi|scopeType为text / textarea时，是否显示输入字数统计|Boolean|true / false|false
labelSpan|copeType为text / textarea时，label的span|Number|-|24
inputSpan|copeType为text / textarea时，input框所在col的span|Number|-|24
radioLabel|scopeType为radio时，单选框的值|String / Boolean / Number|-|-
progressWidth|进度条宽度,需带上单位|String|-|-
showText|是否显示进度条文字内容|Boolean|true / false|true
options|scopeType为select / selectObj时配置的选项|[Array<Object>]|-|-
filterable|scopeType为select / selectObj时，是否可以搜索|true/false|false
placeholder|scopeType为select / selectObj / timePicker时，说明文字|String|-|""
selectChange|scopeType为select / selectObj时,change事件|Function(scope, scope.row, scope.$index)|-|-
labAttr|scopeType为select时，options中label字段名|String|-|
valueAttr|scopeType为select时，options中value字段名|String|-|-
keyAttr|scopeType为selectObj时，options中label字段名|String|-|-
labelAttr|scopeType为selectObj时，options中value字段名|String|-|-
inputFn|scopeType为number/text时，输入时触发的方法|Function(scope, scope.row, scope.$index)|-|-
inputFocus|scopeType为number/text时，输入框的focus事件|Function(scope, scope.row, scope.$index)|-|-
inputChange|scopeType为number时，输入框的change事件|Function(scope, scope.row, scope.$index)|-|-
unit|scopeType为number时，数值的单位|String|-|-
inputBlur|scopeType为text时，输入框的blur事件|Function(scope, scope.row, scope.$index)|-|-
showScore|scopeType为rate时，是否显示分数|Boolean|true/false|true
textColor|scopeType为rate时，显示分数的字体颜色|String|-|"#ff9900"
class|scopeType为button时，该按钮的class|String|-|-
style|scopeType为button时，style样式|Object|-|-
handleClick|scopeType为button时，该按钮的点击事件|Function(index,row)|-|-
buttonType|scopeType为button时，按钮的类型|String|primary / success / warning / danger / info / text|"text"
resultClass|scopeType为result时，该结果的class对应的字段名|String|-|-
resultOptions|scopeType为result时，字段所属的字典|Object|-|-
iconStyle|scopeType为result时，该结果前的icon的style对象名|String|-|-
hide|控制当前列不显示,为true时隐藏当前列，为false时显示当前列|Boolean|true/false|false
slotName|插槽名称|String|-|-
expandSoltName|扩展行插槽名|String|-|-
arrowControl|prop为timePicker时，是否使用箭头进行时间选择|Boolean|true/false|false
isRange|prop为timePicker时，是否为时间范围选择|Boolean|true/false|false
pickerOptions|prop为timePicker / datePicker时，设置选项|Object|-|-
defaultValue|prop为timePicker / datePicker时，选择器打开时默认显示的时间|Date(timePicker) / String(timePicker)|-|-
valueFormat|prop为timePicker / datePicker时，绑定值的格式|String|-|-
change|prop为timePicker / datePicker时，用户确认选定的值时触发|Function(scope, row, index){}|-|-
blur|prop为timePicker / datePicker时，input失去焦点时触发|Function(scope, row, index){}|-|-
focus|prop为timePicker / datePicker时，input获得焦点时触发|Function(scope, row, index){}|-|-
datePickerType|prop为datePicker时，日期的显示类型|String|date / dates / week / year / month / datetime / datetimerange / daterange / monthrange|date
startPlaceholder|范围选择时开始日期的占位内容|String|-|-
endPlaceholder|范围选择时结束日期的占位内容|String|-|-
rangeSeparator|范围选择时的分隔符|String|-|-
format|prop为datePicker时，显示在输入框中的格式|String|-|-
defaultTime|prop为datePicker时，范围选择时选中日期所使用的当日内具体时刻，第一项指定开始日期的时刻，第二项指定结束日期的时刻|String[]||-|-
decimal|scopeType:"money"时，控制小数点的保留位数，为"origin"时保留原位数|String|origin / number|2


#### 说明
  - scopeType对应值参考my-form属性

> `operate[Object<Array<Object>>]`

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
label|操作项按钮名称|String|-|-
icon|操作项icon图标|String|-|-
class|按钮class|String|-|-
style|样式|Object|-|-
show|是否展示|Boolean/function|true / false|-
fn|按钮操作函数|Function(index, row, buttonIndex)|-|-
align|操作栏项对齐方式|String|-|left
width|操作栏宽度|String|-|-

> `operate.operateArr<Array<Object>>`

```
含全局公告样式
.error,.danger{
    color: #F56C6C;
}
```

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
show|是否显示当前项,传Fn方法可做特殊条件控制|Fn/Boolean|-|-
class|按钮自定义类名|String|-|-
type|按钮类型|继承el的按钮类型|String|-|text
fn|按钮事件|Fn|-|默认传 scope.$index, scope.row,buttonIndex,cardTableIndex
style|按钮自定义样式|Object/String|danger/error/或其他|-
icon|按钮自定义字体图标类名|String|-|含默认样式类名iconfont,fz18,mr5...
labelClass|按钮label名自定义类名|String|-|含默认类名样式fz12
label|按钮label名自定义显示名称|String|-|-

> `pickerOptions`
属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
start|prop为timePicker，开始时间|String|-|09:00
end|prop为timePicker，结束时间|String|-|18:00
step|prop为timePicker，间隔时间|String|-|00:30
minTime|prop为timePicker，最小时间|String|-|00:00
maxTime|prop为timePicker，最大时间|String|-|-
selectableRange|prop为timePicker，可选时间段|String / array|-|-
format|prop为timePicker，时间格式化|String|-|HH:mm:ss
shortcuts|设置快捷选项|Object|-|-
disabledDate|设置禁用状态，参数为当前日期，要求返回Boolean|Function|-|-
cellClassName|设置日期的className|Function(Date)|-|-
firstDayOfWeek|周起始日|Number|1到7|-
onPick|选中日期后会执行的回调，只有当daterange / datetimerange才生效|Function({maxDate, minDate})|-|-

### **events**
事件|说明|回调参数
:-|:-|:-
select|表格选中|selection, row
selectAll|全选|selection
rowClick|行单击|row
rowDblclick|行双击|row
cellClick|单元格单击|row, column, cell, event
cellDblclick|单元格双击|row, column, cell, event
singleChange|单选行|row
handleCurrentChange|切换分页|currentPage