# 安装

# npm 安装

yarn add element-ui-saas-extend -S
# or
npm install element-ui-saas-extend -S
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

import ElementUISaaSExtend from "element-ui-saas-extend";
import "element-ui-saas-extend/lib/theme-chalk/index.css";
Vue.use(ElementUISaaSExtend);

# CDN 引入

<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui-saas-extend/lib/theme-chalk/index.css"
/>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui-saas-extend"></script>

# 全局配置

1.0.11 版本结构调整

用法同 Element UI 设置一致 点击查看 (opens new window)

属性 描述 类型 默认值
pickerOptions.range 设置默认 FormAuto 组件中 type 值为 daterangedatetimerangepickerOptions 属性。
pickerOptions.date 设置默认 FormAuto 组件中 type 值为 datedatetimepickerOptions 属性。
tablePage.buttonStyle 设置 TablePage 中预设的 <el-button> 的默认样式属性。
tablePage.pageSizes 设置 TablePage 中预设的 <el-pagination> 的默认页码可选项。 number[] [10, 15, 30, 50]
tablePage.layoutType 设置 TablePage 的默认的布局方式。 default | card default
tablePage.showOverflowTooltip 设置 TablePage 中预设的 <el-table-column> 的默认是否超出省略 tooltip 属性。
tablePage.pageLayout 设置 TablePage 中预设的 <el-pagination> 的默认 paeg-layout 属性。
tablePage.border 设置 TablePage 中预设的 <el-table> 的默认 border 属性。
export interface SaaSInstallationOptions extends InstallationOptions {
  pickerOptions?: Record<"date" | "range", DatePickerOptions>;
  tablePage?: {
    buttonStyle?: Record<
      "plain" | "round" | "size" | "style" | "class",
      string | boolean
    >;
    pageSizes?: number[];
    showOverflowTooltip?: boolean;
    searchCollapse?: boolean | number;
    pageLayout?: string;
    layoutType?: "card" | "default";
  };
}
Vue.prototype.$ELEMENT = {
  tablePage: {
    buttonStyle: {
      round: true, //统一圆角,
    },
    pageLayout: "total, pager", //分页布局
  },
  pickerOptions: {
    date: {
      shortcuts: [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          },
        },
        {
          text: "一周前",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          },
        },
      ],
    },
    range: {
      shortcuts: [
        {
          text: "近1周",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "近1月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "近3月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          },
        },
      ],
    },
  },
};