diff --git a/components.d.ts b/components.d.ts
index 0dbd0e99..e30d186c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,25 +13,28 @@ declare module '@vue/runtime-core' {
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
-    ACollapse: typeof import('ant-design-vue/es')['Collapse']
-    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
-    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
-    AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index 7eda82d6..fc942f65 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -60,7 +60,7 @@
         </div>
 
         <!-- 按钮 -->
-        <slot name="botton-tool">
+        <slot name="bottom-tool">
             <div v-if="showTool" class="card-tools">
                 <div
                     v-for="item in actions"
diff --git a/src/components/Form/FormBuilder.vue b/src/components/Form/FormBuilder.vue
index d1a74645..cac91d0a 100644
--- a/src/components/Form/FormBuilder.vue
+++ b/src/components/Form/FormBuilder.vue
@@ -1,11 +1,252 @@
 <template>
-  <div class=''>
-
+  <div class='JForm-content'>
+    <a-form
+      ref='form'
+      v-bind='props'
+      :model='formData.data'
+      layout='vertical'
+    >
+      <a-row :type='rowType'>
+        <a-col v-for='item in formOptions.data' :key='item.key' :span='item.span'>
+          <a-form-item
+            :name='item.name'
+            :required='item.required'
+            :rules='item.rules'
+            :noStyle='item.noStyle'
+          >
+            <template #label>
+              <span>{{ item.title }}</span>
+              <a-tooltip :title='item.tooltip'>
+                <QuestionCircleOutlined v-if='!!item.tooltip' style='margin-left: 4px; color: rgba(0,0,0,.45) ' />
+              </a-tooltip>
+            </template>
+            <a-input
+              v-if='item.component === componentType.input'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-select
+              v-else-if='item.component === componentType.select'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-inputnumber
+              v-else-if='item.component === componentType.inputNumber'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-input-password
+              v-else-if='item.component === componentType.password'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-switch
+              v-else-if='item.component === componentType.switch'
+              v-bind='item.componentProps'
+              v-model:checked='formData.data[item.name]'
+            />
+            <a-radio-group
+              v-else-if='item.component === componentType.radio'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-checkbox-group
+              v-else-if='item.component === componentType.checkbox'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-time-picker
+              v-else-if='item.component === componentType.time'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-date-picker
+              v-else-if='item.component === componentType.date'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-tree-select
+              v-else-if='item.component === componentType.tree'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :tree-data='item.options'
+            />
+            <a-upload
+              v-else-if='item.component === componentType.upload'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <component
+              v-else
+              :is='item.component'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
   </div>
 </template>
 
-<script setup type='ts' name='FormBuilder'>
-const data = reactive({})
+<script setup lang='ts' name='FormBuilder'>
+import type { Options, OptionsItem, OptionsComponent } from './index.modules'
+import { PropType } from 'vue'
+import { get, isArray, isString, pick, set } from 'lodash-es'
+import { formProps } from 'ant-design-vue/es/form'
+import componentType from './util'
+import {
+  QuestionCircleOutlined
+} from '@ant-design/icons-vue';
+
+const form = ref()
+
+const props = defineProps({
+  ...formProps,
+  options: {
+    type: Object as PropType<Options>,
+    default: () => []
+  },
+  initValue: {
+    type: Object,
+    default: () => ({})
+  },
+  column: {
+    type: Number,
+    default: 1
+  }
+})
+
+// 表单数据
+const formData = reactive({
+  data: {}
+})
+
+const formOptions = reactive<{ data: OptionsComponent[]}>({
+  data: []
+}) // 表单Item
+
+const rowType = ref<string | undefined>(undefined)
+
+const calculateItemSpan = (span?: number | string) => {
+  const itemSpan = 24 / props.column
+  if (!span) return itemSpan
+
+  if (isString(span) && span.includes('px')) {
+    rowType.value = 'flex'
+  } else {
+    return span
+  }
+}
+
+/**
+ * 根据传入的表单options生成表单
+ * @param data {Options}
+ * @param parentKey
+ */
+const handleFormData = (data: Options, parentKey: Array<string> = []): any => {
+  const cacheModel: any = {}
+
+  Object.keys(data).forEach(async (key) => {
+    const optionItem = data[key]
+    const _key = [...parentKey, key]
+    if ('type' in optionItem && optionItem.type === 'Object') {
+      const dataModel = handleFormData(optionItem.properties, _key)
+      cacheModel[key] = dataModel
+    } else if (!('visible' in optionItem) || ('visible' in optionItem && optionItem.visible !== true)){
+      // 处理默认值以及原始值
+      const keyValue = get(formData.data, _key)
+      let _options: any[] = []
+
+      if (keyValue) { // 当前值在formModel中
+        cacheModel[key] = keyValue
+      } else {
+        cacheModel[key] = (optionItem as OptionsItem).default
+      }
+      // 处理options
+      if ('options' in optionItem) {
+        _options = optionItem.options!
+      }
+      // 处理 onSearch 请求
+      if ('onSearch' in optionItem) {
+        const data = await optionItem.onSearch!()
+        if (data) {
+          _options = data
+        }
+      }
+      const optionsItemProps = pick(optionItem, ['componentProps', 'title', 'component', 'rules', 'required', 'hidden', 'tooltip', 'noStyle'])
+      //
+      formOptions.data.push({
+        ...optionsItemProps,
+        name: _key,
+        options: _options,
+        key: isArray(_key) ? _key.toString() : _key,
+        span: calculateItemSpan((optionItem as OptionsItem).span)
+      })
+    }
+  })
+  return cacheModel
+}
+
+/**
+ * 重置表单
+ */
+const resetModel = () => {
+  form.value.resetFields()
+}
+
+/**
+ * 验证并提交表单
+ */
+const formValidate = () => {
+  return new Promise((res, rej) => {
+    form.value.validate().then(() => {
+      res(formData.data)
+    }).catch((err: any) => {
+      rej(err)
+    })
+  })
+}
+/**
+ * 改变单个值
+ */
+const setItemValue = (key: string | (string | number)[], value: any) => {
+  set(formData.data, key, value)
+}
+
+/**
+ * 修改整个表单值
+ * @param data
+ */
+const setData = (data: any) => {
+  formData.data = data
+}
+
+
+if (props.initValue) {
+  formData.data = props.initValue
+}
+
+formData.data = handleFormData(props.options)
+
+watch(props.options, (newValue: any) => {
+  formOptions.data = []
+  formData.data = handleFormData(newValue)
+})
+
+watch(props.initValue, (newValue: any) => {
+  formData.data = newValue
+})
+
+defineExpose({
+  resetModel,
+  formValidate,
+  setItemValue,
+  setData
+})
+
 </script>
 
 <style scoped>
diff --git a/src/components/Form/index.modules.d.ts b/src/components/Form/index.modules.d.ts
new file mode 100644
index 00000000..fd4eabaa
--- /dev/null
+++ b/src/components/Form/index.modules.d.ts
@@ -0,0 +1,40 @@
+import type { FormProps } from 'ant-design-vue/es/form'
+
+export interface OptionsComponent {
+  /** FormItem title **/
+  title?: string
+  /** 组件名称 **/
+  component?: string
+  /** 组件Props **/
+  componentProps?: any
+  /** 组件Options **/
+  options?: any[]
+  name?: any
+  [name: string]: any
+}
+
+export interface OptionsItem extends OptionsComponent{
+  /** 内置查询，会覆盖options **/
+  onSearch?: () => Promise<any>
+  default?: any
+  /** 隐藏Item，值不会进入到FormModel中 **/
+  visible?: boolean
+  /** 表单隐藏域 **/
+  hidden?: boolean,
+  span?: number | string
+  rules?: FormProps.rules
+  required?: boolean
+  tooltip?: string
+  noStyle?: boolean
+}
+
+interface ObjectTypes {
+  type: 'Object'
+  properties: {
+    [name: string]: OptionsItem
+  }
+}
+
+export interface Options extends FormProps {
+  [name: string]: ObjectTypes | OptionsItem
+}
\ No newline at end of file
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index 1ae62176..8a209d84 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,3 +1,4 @@
 import FormBuilder from './FormBuilder.vue'
+export { default as componentType } from './util'
 
 export default FormBuilder
\ No newline at end of file
diff --git a/src/components/Form/util.ts b/src/components/Form/util.ts
new file mode 100644
index 00000000..b0374175
--- /dev/null
+++ b/src/components/Form/util.ts
@@ -0,0 +1,15 @@
+const optionComponentType = {
+  input: 'input',
+  inputNumber: 'inputNumber',
+  password: 'password',
+  switch: 'switch',
+  radio: 'radio',
+  checkbox: 'checkbox',
+  time: 'time',
+  date: 'date',
+  treeSelect: 'treeSelect',
+  upload: 'upload',
+  tree: 'tree',
+  select: 'select'
+}
+export default optionComponentType
\ No newline at end of file
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 9b21c30c..9a623d59 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -1,62 +1,106 @@
 <template>
-    <div class="jtable-body">
-        <div class="jtable-body-header">
-            <div class="jtable-body-header-left">
-                <slot name="headerTitle"></slot>
-            </div>
-            <div class="jtable-body-header-right">
-                <div class="jtable-setting-item" :class="[ModelEnum.CARD === model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
-                    <AppstoreOutlined />
+    <a-spin :spinning="loading">
+        <div class="jtable-body">
+            <div class="jtable-body-header">
+                <div class="jtable-body-header-left">
+                    <slot name="headerTitle"></slot>
                 </div>
-                <div class="jtable-setting-item" :class="[ModelEnum.TABLE === model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
-                    <UnorderedListOutlined  />
+                <div class="jtable-body-header-right" v-if="!model">
+                    <div class="jtable-setting-item" :class="[ModelEnum.CARD === _model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
+                        <AppstoreOutlined />
+                    </div>
+                    <div class="jtable-setting-item" :class="[ModelEnum.TABLE === _model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
+                        <UnorderedListOutlined  />
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="jtable-content">
-            <div v-if="model === ModelEnum.CARD" class="jtable-card">
-                <div 
-                    v-if="dataSource.length"
-                    class="jtable-card-items"
-                    :style="{gridTemplateColumns: `repeat(${column}, 1fr)`}"
-                >
+            <div class="jtable-content">
+                <!-- <div class="jtable-alert">
+                    <a-alert message="Info Text" type="info" />
+                </div> -->
+                <div v-if="_model === ModelEnum.CARD" class="jtable-card">
                     <div 
-                        class="jtable-card-item" 
-                        v-for="(item, index) in dataSource" 
-                        :key="index"
+                        v-if="_dataSource.length"
+                        class="jtable-card-items"
+                        :style="{gridTemplateColumns: `repeat(${column}, 1fr)`}"
                     >
-                        <slot name="cardRender" :item="item" :index="index"></slot>
+                        <div 
+                            class="jtable-card-item" 
+                            v-for="(item, index) in _dataSource" 
+                            :key="index"
+                        >
+                            <CardBox :actions="actions" v-bind="cardProps">
+                                <template #img>
+                                    <slot name="img">
+                                        <img :src="getImage('/device-product.png')" />
+                                    </slot>
+                                </template>
+                                <template #content>
+                                    <slot name="cardContent" :item="item" :index="index"></slot>
+                                </template>
+                            </CardBox>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                     </div>
                 </div>
                 <div v-else>
-                    <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+                    <a-table :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false" :scroll="{ x: 1366 }">
+                        <template #bodyCell="{ column, record }">
+                            <template v-if="column.key === 'action'">
+                                <a-space>
+                                    <a-tooltip v-for="i in actions" :key="i.key" v-bind="i.tooltip">
+                                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                                            <a>
+                                                {{i.text}}
+                                            </a>
+                                        </a-popconfirm>
+                                        <a v-else @click="i.onClick && i.onClick(record)">
+                                            {{i.text}}
+                                        </a>
+                                    </a-tooltip>
+                                </a-space>
+                            </template>
+                            <template v-else-if="column.scopedSlots">
+                               <slot :name="column.key" :row="record"></slot>
+                            </template>
+                        </template>
+                    </a-table>
                 </div>
             </div>
-            <div v-else>
-                <a-table :columns="columns" :dataSource="dataSource" :pagination="false" />
+            <div class="jtable-pagination" v-if="_dataSource.length && !noPagination">
+                <a-pagination
+                    size="small"
+                    :total="total"
+                    :showQuickJumper="false"
+                    :showSizeChanger="true"
+                    v-model:current="pageIndex"
+                    v-model:page-size="pageSize"
+                    :show-total="(total, range) => `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`"
+                    @change="pageChange"
+                    :page-size-options="[12, 24, 48, 60, 100]"
+                />
             </div>
         </div>
-        <div class="jtable-pagination" v-if="dataSource.length">
-            <a-pagination
-                size="small"
-                :total="50"
-                :show-total="total => `第 ${1} - ${1} 条/总共 ${total} 条`"
-            />
-        </div>
-    </div>
+    </a-spin>
 </template>
 
 <script setup lang="ts">
 import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import type { TableProps } from 'ant-design-vue/es/table'
+import type { TooltipProps } from 'ant-design-vue/es/tooltip'
+import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm'
 import { Empty } from 'ant-design-vue'
+import { CSSProperties } from 'vue';
+import { getImage } from '@/utils/comm';
 
 enum ModelEnum {
     TABLE = 'TABLE',
     CARD = 'CARD',
 }
 
-export declare type RequestData = {
+type RequestData = {
     code: string;
     result: {
         data: Record<string, any>[] | undefined;
@@ -67,50 +111,111 @@ export declare type RequestData = {
     status: number;
 } & Record<string, any>;
 
+export interface ActionsType {
+    key: string;
+    text?: string;
+    disabled?: boolean;
+    permission?: boolean;
+    onClick?: (data: any) => void;
+    style?: CSSProperties;
+    tooltip?: TooltipProps;
+    popConfirm?: PopconfirmProps;
+    icon?: string;
+}
+
 interface JTableProps extends TableProps{
-    request: (params: Record<string, any> & {
+    request?: (params: Record<string, any> & {
         pageSize: number;
         pageIndex: number;
     }) => Promise<Partial<RequestData>>;
     cardBodyClass?: string;
     columns: Record<string, any>[];
-    params: Record<string, any> & {
+    params?: Record<string, any> & {
         pageSize: number;
         pageIndex: number;
-    }
+    };
+    model?: keyof typeof ModelEnum | undefined; // 显示table还是card
+    actions?: ActionsType[];
+    noPagination?: boolean;
+    rowSelection?: TableProps['rowSelection'];
+    cardProps?:  Record<string, any>;
+    dataSource?:  Record<string, any>[];
 }
-// props和emit
-const emit = defineEmits(["modelChange"]);
+// props
 const props = withDefaults(defineProps<JTableProps>(), {
     cardBodyClass: '',
-    request: undefined
+    request: undefined,
 })
 
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
-const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
-const column = ref<number>(4);
-const dataSource = ref<Record<string, any>[]>([])
-console.log(props)
-// 方法
 
+const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
+const column = ref<number>(4);
+const _dataSource = ref<Record<string, any>[]>([])
+const pageIndex = ref<number>(0)
+const pageSize = ref<number>(6)
+const total = ref<number>(0)
+const _columns = ref<Record<string, any>[]>([])
+const loading = ref<boolean>(true)
+// 
+// const slotColumns = computed(() => props.columns.filter((item) => item.scopedSlots))
+// 方法
 // 切换卡片和表格
 const modelChange = (type: keyof typeof ModelEnum) => {
-    model.value = type
+    _model.value = type
+}
+// 请求数据
+const handleSearch = async (_params?: Record<string, any>) => {
+    loading.value = true
+    if(props.request) {
+    const resp = await props.request({
+            pageSize: 12,
+            pageIndex: 1,
+            ..._params
+        })
+        if(resp.status === 200){
+            // 判断如果是最后一页且最后一页为空，就跳转到前一页
+            if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
+                handleSearch({
+                    ..._params,
+                    pageSize: pageSize.value,
+                    pageIndex: pageIndex.value - 1,
+                })
+            } else {
+                _dataSource.value = resp.result?.data || []
+                pageIndex.value = resp.result?.pageIndex || 0
+                pageSize.value = resp.result?.pageSize || 6
+                total.value = resp.result?.total || 0
+            }
+        }
+    } else {
+        _dataSource.value = props?.dataSource || []
+    }
+    
+    loading.value = false
 }
 
-// 请求数据
-const handleSearch = async (params1?: Record<string, any>) => {
-    const resp = await props.request({
-        pageSize: 10,
-        pageIndex: 1,
-        ...params1
+const pageChange = (page: number, size: number) => {
+    handleSearch({
+        ...props.params,
+        pageSize: size,
+        pageIndex: pageSize.value === size ? page : 1,
     })
-    if(resp.status === 200){
-        dataSource.value = resp.result?.data || []
-    }
 }
 
 watchEffect(() => {
+    if(Array.isArray(props.actions) && props.actions.length) {
+         _columns.value = [...props.columns,
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 250
+            }   
+        ]
+    } else {
+         _columns.value = [...props.columns]
+    }
     handleSearch(props.params)
 })
 
@@ -160,9 +265,9 @@ watchEffect(() => {
         margin-top: 20px;
         display: flex;
         justify-content: flex-end;
-        // position: absolute;
-        // right: 24px;
-        // bottom: 24px;
+        /deep/  .ant-pagination-item {
+            display: none !important;
+        }
     }
 }   
 </style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 7bcdd04e..d3daf534 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,7 +3,8 @@ import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
 import JTable from './Table/index.vue'
 import TitleComponent from "./TitleComponent/index.vue";
-import Form from './Form'
+import Form from './Form';
+import CardBox from './CardBox/index.vue';
 
 export default  {
     install(app: App) {
@@ -12,5 +13,6 @@ export default  {
             .component('JTable', JTable)
             .component('TitleComponent', TitleComponent)
             .component('Form', Form)
+            .component('CardBox', CardBox)
     }
 }
diff --git a/src/style.css b/src/style.css
index e69de29b..30cdc6c2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,4 @@
+.ant-form-item-required:before {
+    position: absolute;
+    right: -12px;
+}
\ No newline at end of file
diff --git a/src/views/demo/Form.vue b/src/views/demo/Form.vue
index 1f48bc29..cd585a77 100644
--- a/src/views/demo/Form.vue
+++ b/src/views/demo/Form.vue
@@ -1,9 +1,59 @@
 <template>
-  <Form />
+  <Form
+    ref='form'
+    :options='options'
+    :initValue='initValue'
+  />
+  <a-button @click='submit'>提交</a-button>
+  <a-button @click='reset'>重置</a-button>
+  <a-button @click='setValue'>修改name</a-button>
 </template>
 
 <script setup name='FormDemo'>
-const data = reactive({})
+import { componentType } from 'components/Form'
+const form = ref()
+const initValue = reactive({})
+
+const submit = () => {
+  form.value.formValidate().then(res => {
+    console.log(res)
+  })
+}
+
+const reset = () => {
+
+}
+
+const setValue =() => {
+  initValue.name = '111111'
+}
+
+const options = reactive({
+  name: {
+    component: componentType.input,
+    componentProps: {
+      style: {
+        width: '200px'
+      }
+    },
+    title: '测试',
+    required: true
+  },
+  sex: {
+    component: componentType.select,
+    title: '性别',
+    options: [
+      { label: '111', value: 1 },
+      { label: '222', value: 2 },
+    ],
+    required: true,
+    rules: [
+      { required: true, message: '请选择性别'}
+    ],
+    tooltip: '性别',
+    default: 1
+  }
+})
 </script>
 
 <style scoped>
diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue
index 89887a55..c2986eb6 100644
--- a/src/views/demo/table/index.vue
+++ b/src/views/demo/table/index.vue
@@ -3,32 +3,48 @@
         <JTable 
             :columns="[
                 {
-                    title: '姓名',
+                    title: '名称',
                     dataIndex: 'name',
                     key: 'name',
                 },
                 {
-                    title: '年龄',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: 'ID',
+                    dataIndex: 'id',
+                    key: 'id',
+                    scopedSlots: true
                 },
                 {
-                    title: '住址',
-                    dataIndex: 'address',
-                    key: 'address',
-                }
+                    title: '分类',
+                    dataIndex: 'classifiedName',
+                    key: 'classifiedName',
+                },
             ]"
+            :actions="actions"
             :request="request"
+            :rowSelection="rowSelection"
         >
             <template #headerTitle>
                 <a-button type="primary">新增</a-button>
             </template>
-            <template #cardRender="slotProps">
-                <CardBox>
-                    <template #content>
-                        {{slotProps.item.name}}
-                    </template>
-                </CardBox>
+            <template #cardContent="slotProps">
+                <h3>{{slotProps.item.name}}</h3>
+                <a-row>
+                    <a-col :span="12">
+                        <div class="card-item-content-text">
+                            设备类型
+                        </div>
+                        <div>直连设备</div>
+                    </a-col>
+                    <a-col :span="12">
+                        <div class="card-item-content-text">
+                            产品名称
+                        </div>
+                        <div>测试固定地址</div>
+                    </a-col>
+                </a-row>
+            </template>
+            <template #id="slotProps">
+                <a>{{slotProps.row.id}}</a>
             </template>
         </JTable>
     </div>
@@ -36,8 +52,43 @@
 
 <script setup lang="ts">
 import server from "@/utils/request";
-import CardBox from '@/components/CardBox/index.vue';
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import type { TableProps, TableColumnType } from 'ant-design-vue';
+
 const request = (data: any) => server.post(`/device-product/_query`, data)
+const actions: ActionsType[] = [
+    {
+        key: 'edit',
+        // disabled: true,
+        text: "编辑",
+        tooltip: {
+            title: '编辑'
+        },
+        // component: <UnorderedListOutlined />
+    },
+    {
+        key: 'delete',
+        disabled: true,
+        text: "删除",
+        tooltip: {
+            title: '删除'
+        },
+        popConfirm: {
+            title: '确认删除?'
+        }
+    }
+]
+
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys: string[], selectedRows: any[]) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+    getCheckboxProps: (record: any) => ({
+        disabled: record.name === 'Disabled User',
+        name: record.name,
+    }),
+};
 
 </script>