easy-element-ui/README.md

base on Element-UI

# easy-element-ui

#### Author: Shinn

#### Email: 164888051@qq.com

<br>

#### This package was based on Element-UI.2.5.10

<br>

## Make sure you understand Element-UI before using it

For easy and fast Html page development, <br>
This library refers to the design idea of E-charts Options, <br>

Now, you can use the library by configuring Json parameters, <br>
To render your background application page,

And monitor the Change and Click events of each component in real time,<br>
Don't worry about component configuration of Element-UI <br>
When you develop background level pages in the future, you will often have less than 100 lines of page code, <br>
You only need to introduce one component to render the entire page, <br>
If the page is long, you can put the prop json object information of the form or table, <br>
Put it into a separate js file and import it via import. <br>
Easy to adjust layout and modify page elements.

<br>

## 使用前请确认您对 Element-UI 有所了解

<br>
为了方便和快速开发 Html 页面，<br>
本库参考了 E-charts Options 的设计思想，<br>
现在，你可以使用本库通过配置Json参数的方式，<br>
来渲染您的后台级应用页面，

并实时监听每个组件的 Change 及 Click 事件,<br>
无需去关心 Element-UI 的组件配置<br>
当你未来开发后台级页面时，往往可让你页面代码不足 100 行，<br>
只需要引入一个组件即可渲染整个页面，<br>
如果页面很长，可以将 form 或 table 的 prop json 对象信息，<br>
放到一个单独的 js 文件，通过 import 引入即可，<br>
方便调整布局，和修改页面元素。

<br>

#### 目前已封装进 CommonForm 的组件为:

#### 如果有特殊需求，可配合 slot 组件进行自定义开发,slot 可以嵌套任何组件，理论上满足一切需求，若使用 slot 组件，change 和 click 事件监听需要自己实现

<br>

<pre>
Radio 单选框
Checkbox 多选框
Input 输入框
InputNumber 计数器
Select 选择器
Cascader 级联选择器
Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Text 文本组件
Slot 自定义组件
</pre>

<br>

## For Update Info

<br>

<details>
<summary>Version Update Notes</summary>

```javascript
v1.2.7
CommonForm
  修复在日期组件中，disabledDate不填写报错的问题

v1.2.6
CommonForm
  所有组件show属性现在可以为函数类型，用于判断是否显示
  date相关组件中的data属性里新增disabledDate:(item, index, time)=>boolean,用于判断日历显示的每一个时间点是否禁止点击,true为禁止,false为可点击
CommonTable
  type=button时
    button新增show，show可以为boolean类型,也可以为(btnItem,tableIndex,tableItem)=>boolean函数类型，用于判断按钮是否显示
    button新增disabled，disabled可以为boolean类型,也可以为(btnItem,tableIndex,tableItem)=>boolean函数类型，用于判断按钮是否禁用
    button删除condition属性

v1.2.5
CommonForm
  select组件添加远程搜索功能

v1.2.4
CommonForm
  修改组件错别字

v1.2.2
CommonForm
  select组件 新增filteralbe auto_create属性

v1.2.1
CommonForm
  每个子组件的id值 不在需要必填，不填时将默认生成随机id

v1.1.9
CommonTable
  prop 补充相关说明文档

v1.1.8
CommonTable
  新增show_overflow_tooltip,用于设置column文字是否单行显示

v1.1.7
CommonTable
  新增empty_text,设置没有数据时显示的提示文字,
  新增fixed,用于固定某个列的位置
  新增sort_method，用于自定义排序方法
  新增resizable，用于控制是否可以手动改变列的宽度
  新增align，设置对齐方式

v1.1.5
CommonTable
  新增column_key,用于配合onFilterChange，监听事件触发对应的列

v1.1.4
CommonTable
  新增table_rate控制table的尺寸大小 medium,small,mini
  新增filters
  新增filter-method
  新增filter-multiple
  新增事件onFilterChange

v1.1.1
CommonForm
  Input组件新增show_password属性，用于显示/隐藏密码

v1.1.0
CommonForm
  新增方法values() =>返回form_prop数组中以value为key的对象，方便操作每一个元素的具体属性,调用方式为this.$refs["common-form"].values()

v1.0.26
CommonForm
  新增组件类型datetime_picker

v1.0.25
CommonForm
  prop新增属性show 控制组件的显示和隐藏

v1.0.24
CommonTableView新增方法
    clearAll() //清除所有已选状态
    refreshTableSelectState() //更新当前页的选中状态

v1.0.21
Select组件 添加multiple,调整data结构，请重新调整Select data数据结构

v1.0.20
CommonTableView 添加 sortable属性，支持默认排序
修复Select组件 options disabled失效的问题

v1.0.19
调整ReadMe document

v1.0.10
所有组件支持自定义Style，
但不是所有Style都会生效，
某些样式仍需要通过::v-deep or /deep/ or >>> 等命令
通过样式穿透强制修改

删除了部分设置，统一都有Style配置

All components support custom Style,
But not all styles work,
Some styles still require the command ::v-deep or /deep/ or >>>
Force changes through style penetration

Deleted some Settings, unified all have the Style configuration
```

</details>

<br>

## How to use?

<br>

```
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import EasyElementUI from "easy-element-ui"

Vue.use(ElementUI);
Vue.use(EasyElementUI)
```

<br/>

## CommonForm

<br>

<details>
<summary>Event Listener Detals</summary>

```javascript
changeUploadState(obj); //obj=>{item_id,obj,value}上传组件各状态监听
changeValue(obj); //obj=>{item_id,obj,value}组件中 value 改变的事件
clickButton(obj); //obj=>{item_id,child_id,obj}组件中按钮的点击事件
```

</details>

<br>

<details>
<summary>Methods Details</summary>

```javascript
validate();
values(); //获取form_prop数组以value为key的对象，方便操作对应元素

//example:
this.$refs[your_common_form_ref_name].validate().then((res) => {
  console.log(res); //res is- true or false
});
```

</details>

<br>

<details>

<summary>Props Details</summary>

```javascript
form_ref_name: {
    //默认form的ref名称
    type: String,
    default: "common-form",
},
form_item_span: {
    //默认一个组件占据的span的大小
    type: Number,
    default: 12,
},
label_position: {
    //form_label的显示位置
    type: String,
    default: "left", //left right top
},
label_end: {
    //form_label的结尾添加字符
    type: String,
    default: "",
},
label_width: {
    //form_label的默认宽度 默认70 可修改
    type: Number,
    default: 70,
},
form_value: {
    //整个页面对应的value，与form_prop一一对应
    type: Object,
    default: () => {},
},
form_prop: {
    //整个页面的组件结构树及参数列表，必填
    type: Array,
    default: [],
}
form_column_style: {
    //自定义Style
    type: Object,
    default: () => {},
}
```

</details>

<br>

<details>
<summary>FormProp Details</summary>

```javascript
//数组中的每个对象都是一个组件，最外层属性是所有组件通用的属性，
//data是组件特有的属性
//所有id改为非必填 不填id时将自动生成id
      [
        {
            //输入框 通用属性 Common propertys
            id: 1, //【非】必填 不可重复 可以是任何数据类型 id不存在时 将自动生成id
            label: "name",//form_label_name
            type: "input", //必填
            value: "name", //对应 form_value 里的 key
            place_holder: "",//默认提示文字
            span: 12,//宽度，采用24栅格模式
            offset: 0,//间隔多少格
            show:true,//不传或者true 为显示组件 否则隐藏组件
            show:()=>{//show属性也可以是函数 用于判断是否显示
              /**
               * 判断逻辑
               */
              return true
            },
            label_width: 100,//form_label的宽度
            required: false,//if require=true, then rule will be unused
            rule: [
            //当你配置了rule，require属性将失效
            //配置方法请参考标准化rule配置规则，自行搜索寻找教程
              {
                required:true.
                trigger: "change",
                validator: (rule, value, callback) => {
                  if (value.length == 2) {
                    callback(new Error("error"));
                  } else {
                    callback();
                  }
                },
              },
            ],
            rule_description:"",//require=true时，修改默认错误提示文案
            break: true, //true 代表之后的组件需要另起一行 newline
            style: {
              //自定义style,将作用于组件本身
              border: "1px solid #f00",
              "padding-bottom": "20px",
            },
            form_item_style:{
              //form-item-style,将作用于form_item,也就是form_label+组件
              "margin-bottom": "20px",
              "padding-bottom": "20px",
              border: "1px solid #0f0",
            },

            //data里的所有属性都是，该组件独享属性，后续组件都如此
            data: {
              type: "text",
              show_password:false,//是否显示密码
              autosize: true, //{ minRows: 2, maxRows: 6 }
              pre_icon: "el-icon-search",
              disabled: false,
              max_length: 200, //输入长度
              clearable: false,
              slot_custom_append: true, //自定义组件样式
              slot_custom_prepend: true,
              slot_custom_append_name: "",
              slot_custom_prepend_name: "",

              //如果自定义组件样式，下面属性全部失效
              slot_append: true, //后面添加组件 默认button
              slot_prepend: true, ///前面添加组件 默认button
              slot_append_icon: "el-icon-search",
              slot_append_name: "Search",
              slot_append_style:{},
              slot_prepend_icon: "el-icon-search",
              slot_prepend_name: "Search",
              slot_prepend_style:{},
              press_action: "", //点击事件发起方 append或prepend
          },
        },
        {
          //选择框
          id: 2,
          label: "state",
          value: "state",
          type: "select",
          data: [
            remote_method: //远程搜索方法
            (query) => {
              this.$refs["common-form"].values()["state"].data.list = [
                { id: 1, label: "1", value: "1" },
                { id: 2, label: "2", value: "2" },
                { id: 3, label: "3", value: "3" },
              ];
            },
            remote: true,//是否开启远程搜索
            disabled:false,
            list: [
              { id: 1, label: "true", value: "true" },
              { id: 2, label: "false", value: "false", disabled: false },
            ],
            filterable:true,//是否支持搜索
            allow_create:false,//是否支持创建
            multiple: true,
          ],
        },
        {
          //开关选择器
          id: 3,
          label: "switch",
          value: "switch",
          type: "switch",
          data: {
            disabled: false,
          },
        },
        {
          //按钮
          id: 4,
          type: "button",
          data: [
            {
              id: 1,
              label: "Search",
              type: "primary", //primary danger warning info null
              disabled: false,
              style:{'font-size':'20px'}
            },
            { id: 2, label: "Reset" },
          ],
        },
        {
          //时间范围选择器
          id: 5,
          label: "time",
          value: "datetimerange",
          type: "datetimerange",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          },
        },
        {
          //日期范围选择器
          id: 6,
          label: "time",
          value: "daterange",
          type: "daterange",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          },
        },
        {
          //日期选择器
          id: 7,
          label: "time",
          value: "date",
          type: "date",
          disabled: false,
          data:{
             disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          }
        },
        {
          //插槽
          id: 8,
          type: "slot",
          slot_name: "slot1",
          data:{
            //custom value
          }
        },
        {
          //单选-圆钮
          id: 9,
          label: "radio",
          type: "radio",
          data: [
            { id: 1, label: "option 1", value: "1", style: {}, disabled: false },
          ],
        },
        {
          //单选-按钮
          id: 9,
          label: "radiobutton",
          type: "radiobutton",
          data: [
            { id: 1, label: "option 1", value: "1", style: {}, disabled: false },
          ],
        },
        {
          //多选-圆钮
          id: 10,
          label: "checkbox",
          type: "checkbox",
          value:[],
          data: [{ id: 1, label: "option 1", value: "1", disabled: false ,style: {} }],
        },
        {
          //多选-按钮
          id: 11,
          label: "checkboxbutton",
          type: "checkboxbutton",
          value:[],
          data: [{ id: 1, label: "option 1", value: "1", disabled: false,style: {} }],
        },
        {
          //数字选择器
          id: 12,
          type: "number",
          data: {
            disabled: false,
            min: 1,
            max: 10,
            step: 2,
            precision: 3, //小数点 精度
            position: "right", //加减号位置
          },
        },
        {
          //输入框-输入建议
          id: 13,
          label: "auto-complete",
          type: "input-auto-complete",
          data: {
            disabled: false,
            trigger_on_focus: false,
            placement: "top",
            pre_icon: "el-icon-search",
            clearable: false,
            max_length: 10,
            list: [
              { value: "1" },
              { value: "2" },
              { value: "4" },
              { value: "5" },
            ],
          },
        },
        {
          //多层级单/多选框
          id: 14,
          label: "cascader",
          type: "cascader",
          data: {
            clearable: true,
            trigger: "click", //层级展现方式 click|hover
            show_all_levels: true, //是否选中节点显示完整路径
            multiple: true, //是否启动多选
            collapse_tags: false, //是否折叠显示结果
            strict: true, //是否启动单选
            disabled: false,
            list: [
              {
                value: "zhinan",
                label: "指南",
                disabled: true,
                children: [
                  {
                    disabled: true,
                    value: "1",
                    label: "1",
                  },
                  {
                    value: "2",
                    label: "2",
                  },
                ],
              },
            ],
          },
        },
        {
          id: 15,
          type: "slider",
          label: "test",
          value: "test",
          data: {
            disabled: false,
            min: 0,
            max: 100,
            step: 10, //步长
            disabled: false,
            show_tooltip: true, //是否显示提示框
            show_stops: true, //是否显示停顿点
            show_input: false, //是否显示输入框
            vertical: false, //横竖模式
            range: true, //范围模式
            height: 200, //如果是范围模式 此值必填
            marks: {
              0: "0°C",
              8: "8°C",
              37: "37°C",
              50: {
                style: {
                  color: "#1989FA",
                },
                label: this.$createElement("strong", "50%"),
              },
            },
            format_tooltip: (val) => val * 10, //tooltip显示文字的格式化
          },
        },
        {
          //时间选择器(hour:minute:second)
          id:16,
          type: "time",
          label: "Time",
          value: new Date(2022, 11, 22, 18, 0),
          data:{
            disabled: false,
            selectableRange:'00:00:00 - 23:59:59',
          }
        },
        {
          //文本组件
          id:17,
          type: "text",
          label: "text",
          value: "",
        },
        {
          //上传组件
          id:18,
          type:"upload",
          label:"upload",
          data:{
            disabled: false,
            auto_upload:true,
            action:"url",
            multiple:true,
            disabled:false,
            limit:1,
            file_list:""
            button_name:"",
            button_style:{},
            tip:"",
            tip_style:{}
          }
        },
        {
          id:19,
          type: "time_picker",
          label: "time_picker",
          value: "",
          data: {
            disabled: false,
            selectableRange: {
              start: "00:00",
              step: "00:01",
              end: "24:00",
            },
          },
        },
        {
          id:20,
          type: "time_picker_range",
          label: "time_picker_range",
          value: "",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
          },
        },
        {
          id:21,
          type: "datetime_picker",
          label: "datetime_picker",
          value: "",
          data: {
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
            picker_options:{
              //详见element-ui官方文档
            },
            disabled: false,
          },
        },
      ]
```

</details>

<br>

<details>
<summary>CommmonForm Example</summary>

```javascript
<template>
  <CommonForm
      ref="common-form"
      :form_prop="form_prop"
      :form_value="form_value"
      :form_item_span="7"
      label_position="left"
      label_end=":"
  >
  </CommonForm>
</template>

form_value = {
  name: "",
  number: "",
  state: "",
  text: "",
  cascader: "",
  auto: "",
  date: "",
  checkbox: [],
  datetime: [],
  daterange: [],
  radio: "",
  switch: true,
  time: "", //new Date(2022, 11, 22, 18, 0)
}

form_prop: [
  {
    id: 1,
    type: "input",
    label: "Name",
    value: "name",
    label_width: 70,
    required: true,
    form_item_style: {
      "margin-bottom": "20px",
    },
    style: {
      "font-size": "20px",
    },
    data: [
      { id: 1, label: "true", value: "true" },
      { id: 2, label: "false", value: "false" },
    ],
  },
  {
    id: 2,
    type: "select",
    label: "State",
    value: "state",
    required: true,
    offset: 1,
    form_item_style: {
      border: "1px solid #f00",
      "padding-bottom": "20px",
    },

    data: [
        list: [
          { id: 1, label: "true", value: "true" },
          { id: 2, label: "false", value: "false", disabled: false },
        ],
        multiple: true,
    ],
  },
  {
    id: 3,
    type: "button",
    break: true,
    required: true,
    style: {
      position: "relative",
      left: "-20px",
    },
    data: [
      {
        id: 1,
        label: "Search",
        type: "primary",
        style: { "font-weight": "bold" },
      },
      {
        id: 2,
        label: "Reset",
        type: "default",
        style: { color: "#f00" },
      },
    ],
  },
  {
    id: 4,
    type: "datetimerange",
    label: "Alert Time",
    value: "datetime",
    label_width: 100,
    required: true,
    data: {
      separator: "-",
    },
  },
  {
    id: 5,
    type: "time",
    label: "Time",
    value: "time",
    offset: 1,
    required: true,
  },
  {
    id: 8,
    type: "daterange",
    label: "Date Range",
    value: "daterange",
    label_width: 120,
    offset: 1,
    required: true,
    data: {
      separator: "-",
    },
  },
  {
    id: 6,
    type: "text",
    label: "Text",
    style: {
      "font-size": "20px",
    },
    value:
      "This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,",
  },
  {
    id: 7,
    type: "switch",
    label: "switch",
    value: "switch",
    offset: 1,
    required: true,
  },
  {
    id: 9,
    type: "date",
    label: "date",
    value: "date",
    offset: 1,
    required: true,
  },
  {
    id: 10,
    label: "radio",
    type: "radio",
    value: "radio",
    offset: 1,
    required: true,
    data: [
      {
        id: 1,
        label: "option 1",
        value: "1",
        style: {},
      },
      {
        id: 2,
        label: "option 2",
        value: "2",
        style: {},
      },
    ],
  },
  {
    id: 11,
    label: "checkbox",
    type: "checkbox",
    value: "checkbox",
    offset: 1,
    label_width: 100,
    required: true,
    break: true,
    data: [
      {
        id: 1,
        label: "option 1",
        value: "1",
        disabled: false,
        style: {},
      },
      {
        id: 2,
        label: "option 2",
        value: "2",
        disabled: false,
        style: {},
      },
    ],
  },
  {
    id: 12,
    type: "number",
    value: "number",
    required: true,
    label: "number",
    data: {
      min: 1,
      max: 10,
      step: 2,
      precision: 3, //小数点 精度
      position: "right", //加减号位置
    },
  },
  {
    id: 13,
    label: "auto-complete",
    type: "input-auto-complete",
    value: "auto",
    label_width: 150,
    offset: 1,
    required: true,
    data: {
      disabled: false,
      trigger_on_focus: false,
      placement: "top",
      pre_icon: "el-icon-search",
      clearable: false,
      max_length: 10,
      list: [
        { value: "1" },
        { value: "2" },
        { value: "4" },
        { value: "5" },
      ],
    },
  },
  {
    //多层级单/多选框
    id: 14,
    label: "cascader",
    type: "cascader",
    value: "cascader",
    offset: 1,
    required: true,
    label_width: 100,
    data: {
      clearable: true,
      trigger: "click", //层级展现方式 click|hover
      show_all_levels: true, //是否选中节点显示完整路径
      multiple: true, //是否启动多选
      collapse_tags: false, //是否折叠显示结果
      strict: true, //是否启动单选
      disabled: false,
      list: [
        {
          value: "zhinan",
          label: "指南",
          disabled: true,
          children: [
            {
              disabled: true,
              value: "1",
              label: "1",
            },
            {
              value: "2",
              label: "2",
            },
          ],
        },
      ],
    },
  },
],
```

</details>

<br>

## CommonTableView

<br>

<details>
<summary>Event Listener Details</summary>

```javascript
onClickButton(obj); //obj->{id,row} 按钮点击事件监听
onPageChange(v); //页面切换事件
onFilterChange(obj); //筛选菜单事件监听
onRowClick(obj); //某一行被点击的事件
```

</details>

<br>

<details>
<summary>Methods Details</summary>

```javascript
init(array); //set select values
clearAll(); //清除所有已选状态
setCurrentRow(row); //设置table的单选状态，不传row则取消当前高亮选中
refreshTableSelectState(); //更新当前页的选中状态
```

</details>

<br>

<details>
<summary>Props Details</summary>

```javascript
    table_page: {
      //当前页码
      type: Number,
      default: 1,
    },
    table_size: {
      //每页条数
      type: Number,
      default: 10,
    },
    table_total: {
      //总条数
      type: Number,
      default: 0,
    },
    empty_text: {
      type: String,
      default: "",
    },
    page_button_count: {
      //翻页组件 最多显示几个页码按钮
      type: Number,
      default: 7, //center left right
    },
    page_position: {
      //翻页组件的显示位置
      type: String,
      default: "center", //center left right
    },
    show_page: {
      //是否显示page组件
      type: Boolean,
      default: false,
    },
    table_highlight_current_row: {
      //是否高亮当前行
      type: Boolean,
      default: false,
    },
    key_name: {
      //多选，收集的值 对应list里的key
      type: String,
      default: "id",
    },
    table_select_list: {
      //默认选择数据 内容需与key_name的值对应 用于自动更新
      type: Array,
      default: [],
    },

    table_rate: {
      //表格的尺寸大小
      type: String,
      default: "medium",
    },

    table_ref_name: {
      //默认table的ref名称
      type: String,
      default: "base-common-table",
    },
    table_max_height: {
      //最大高度 默认auto
      type: String,
      default: "auto",
    },

    table_stripe: {
      //是否显示stripe
      type: Boolean,
      default: true,
    },
    table_border: {
      //是否显示Tableview的边框
      type: Boolean,
      default: true,
    },

    table_list: {
      //list数据
      type: Array,
      default: [],
    },
    table_prop: {
      //table渲染list
      type: Array,
      default: [],
    },
```

</details>

<br>

<details>
<summary>TableProp Details</summary>

```javascript
{
    id: 1,
    label: "Operation",//form_label_name
    type: "button",//button select text slot 4种组件类型 一般设置属性只对text和slot生效
    min_width:200,
    width:200,
    sortable:false,//是否开启排序
    resizable:true,//是否可以拖动列的宽度
    column_key:"test",//一般这个值配合filter相关功能使用
    fixed:"left",//	true, left, right
    align:"",//left/center/right
    show_overflow_tooltip:false,//文字过多时，显示tooltip
    slot_name: "slot1",//if you want to use slot, please set its name 如果使用了type=slot 需要设置slot_name 区分column
    filters: [ //当前列 弹出的筛选菜单数组
            { text: "2016-05-01", value: "2016-05-01" },
            { text: "2016-05-02", value: "2016-05-02" },
            { text: "2016-05-03", value: "2016-05-03" },
            { text: "2016-05-04", value: "2016-05-04" },
    ],
    filterMultiple: false, //是否支持多选
    filterHandler: (value, row, column) => {
      //选中后 的处理逻辑
      return true;
    },
    sort_method:(a,b)=>{
      return true
    },
    data: {
      style: {
        //单元格Style样式
        "font-size": "14px",
        "margin-right": "10px",
      },
      list: [
        //type=button，设置按钮及其样式
        {
          id: 1,
          label: "Manager",
          font_size: "14px",
          show:true,//是否显示
          show:(btnItem,tableIndex,tableItem)=>{//是否显示
            return true;
          },
          disabled:true,//是否禁用
          disabled:(btnItem,tableIndex,tableItem)=>{//是否禁用
            return true;
          },
          style: {},
        },
        { id: 2, label: "Ignore" },
        { id: 3, label: "Delete", type: "delete" },
      ],
    }
}
```

</details>

<br>

<details>
<summary>CommonTableView Example</summary>

```javascript
<template>
  <CommonTableView
        ref="common-table"
        style="margin-top: 20px"
        :table_prop="table_prop"
        :table_list="table_list"
        :table_select_list.sync="table_select_list"
        :table_page="table_page"
        :table_total="table_total"
        :table_size="table_size"
        :show_page="true"
      >
      <template v-slot:slot1="scope">
        <div>{{ scope }}</div>
      </template>
      <template v-slot:slot2="scope">
        <div>{{ scope }}</div>
      </template>
  </CommonTableView>
</template>

table_page: 1,
table_size:10,
table_total: 0,
table_select_list: [],
table_list: [
    { id: 1, name: "name", test: "a" },
    { id: 2, name: "name", test: "dfdffdf" },
    { id: 3, name: "name", test: "<font color='#ff0000'>tecst</font>" },
    {
    id: 4,
    name: "name",
    test: "123",
    },
],
table_prop: [
    { id: 0, type: "select" },
    { id: 1, prop: "test", label: "Alert Time" },
    { id: 2, prop: "test", label: "Alert Content", min_width: 200 },
    { id: 3, prop: "test", label: "Level" },
    { id: 4, prop: "test", label: "Device Ip" },
    { id: 5, prop: "name", label: "Project" },
    { id: 6, prop: "test", label: "Group" },
    {
      id: 7,
      prop: "test",
      label: "Type",
      type: "slot",
      slot_name: "slot2",
    },
    {
      id: 8,
      prop: "test",
      label: "Log File",
      type: "slot",
      slot_name: "slot1",
    },
    {
      id: 9,
      label: "Operation",
      type: "button",
      width: 190,
      data: {
        style: {
          "font-size": "14px",
          "margin-right": "10px",
        },
        list: [
          {
            id: 1,
            label: "Manager",
            style: {
              color: "#ff0000",
            },
          },
          { id: 2, label: "Ignore" },
          { id: 3, label: "Delete" },
        ],
      },
    }
],
```

</details>

<br>

## Other Methods

<br>

<details>
<summary>Methods</summary>

```javascript
setLang("cn") //cn中文 en英文
setLog(true or false) // show Log
```

</details