特性: 新增表单

src/components/SearchForm/advancedForm/index.vue

@@ -1,32 +1,35 @@
 <template>
   <div class="advancedForm">
     <el-form
-        ref="ruleFormRef"
+      ref="ruleFormRef"
-        :inline="true"
+      :inline="true"
-        :label-position="'right'"
+      :label-position="'right'"
-        :model="formInline"
+      :model="formInline"
-        class="form-inline">
+      class="form-inline"
+    >
       <el-row
-          :class="{
+        :class="{
-            'not-show':byHeight&&!isExpand
+          'not-show': byHeight && !isExpand,
-          }"
+        }"
-          :gutter="gutterWidth">
+        :gutter="gutterWidth"
-        <el-col :span="item.span"
+      >
-                v-for="item,index in columns"
+        <el-col
-                :key="item.name"
+          :span="item.span"
-                v-show="byHeight?true:(index< (showRow*3)||isExpand)">
+          v-for="(item, index) in columns"
-          <el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type==='input'">
+          :key="item.name"
-            <el-input
+          v-show="byHeight ? true : index < showRow * 3 || isExpand"
-                clearable
+        >
-                v-model="formInline[item.name]" :placeholder="item.placeholder" />
+          <el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
+            <el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
           </el-form-item>
-          <template v-else-if="item.type==='date'">
+
-            <el-form-item :label="item.title" :label-width="labelWidth" >
+          <template v-else-if="item.type === 'date'">
+            <el-form-item :label="item.title" :label-width="labelWidth">
               <el-date-picker
-                  value-format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
-                  v-model="formInline[item.name]"
+                v-model="formInline[item.name]"
-                  type="date"
+                type="date"
-                  :placeholder="item.placeholder"
+                :placeholder="item.placeholder"
               />
             </el-form-item>
           </template>
@@ -35,85 +38,86 @@
     </el-form>
     <div class="search-btn">
       <el-button type="primary" @click="onSubmit">查询</el-button>
-      <el-button  @click="resetForm(ruleFormRef)">重置</el-button>
+      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
-      <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+      <el-button link type="primary" @click="isExpand = !isExpand"
-        <arrow-down v-if="!isExpand" />
+        >{{ isExpand ? '合并' : '展开'
-        <arrow-up v-else /> </el-icon
+        }}<el-icon>
+          <arrow-down v-if="!isExpand" />
+          <arrow-up v-else /> </el-icon
       ></el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {reactive, ref} from 'vue'
+  import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-let props = defineProps({
+  let props = defineProps({
-  // 宽度
+    // 宽度
-  labelWidth: {
+    labelWidth: {
-    default: "100px",
+      default: '100px',
-  },
+    },
-  gutterWidth: {
+    gutterWidth: {
-    type: Number,
+      type: Number,
-    default: 24,
+      default: 24,
-  },
+    },
-  showRow:{
+    showRow: {
-    type: Number,
+      type: Number,
-    default: 1,
+      default: 1,
-  },
+    },
-  columns:{
+    columns: {
-    type:Array,
+      type: Array,
-    default:()=>[]
+      default: () => [],
-  },
+    },
-  byHeight:{
+    byHeight: {
-    type:Boolean,
+      type: Boolean,
-    default:false
+      default: false,
+    },
+  })
+  const emit = defineEmits(['submit', 'reset'])
+  // 收缩展开
+  const isExpand = ref(false)
+
+  const formInline = reactive({})
+
+  for (let item of props.columns) {
+    formInline[item.name] = null
   }
-})
-const emit = defineEmits(['submit','reset'])
-// 收缩展开
-const isExpand = ref(false)
 
-const formInline = reactive({
+  const onSubmit = () => {
-})
+    emit('submit', formInline)
+  }
 
-for(let item of props.columns){
+  const resetForm = (formEl: FormInstance | undefined) => {
-  formInline[item.name] = null
+    console.log('formEl', formEl)
-}
+    if (!formEl) return
-
+    formEl.resetFields()
-const onSubmit = () => {
+    const keys = Object.keys(formInline)
-  emit('submit',formInline)
+    keys.forEach((key) => {
-}
+      formInline[key] = null
-
+    })
-const resetForm = (formEl: FormInstance | undefined) => {
+    emit('reset', formInline)
-  console.log('formEl',formEl)
+  }
-  if (!formEl) return
-  formEl.resetFields()
-  const keys = Object.keys(formInline);
-  keys.forEach(key => {
-    formInline[key] = null;
-  });
-  emit("reset", formInline);
-}
 </script>
 
 <style lang="scss" scoped>
-.advancedForm{
+  .advancedForm {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  .form-inline{
+    .form-inline {
-    flex: 1;
+      flex: 1;
+    }
+    .el-form--inline .el-form-item {
+      width: 100%;
+      margin-right: 10px;
+    }
+    .search-btn {
+      margin-left: 40px;
+    }
+    .not-show {
+      height: 40px;
+      overflow: hidden;
+    }
   }
-  .el-form--inline .el-form-item{
-    width: 100%;
-    margin-right: 10px;
-  }
-  .search-btn{
-    margin-left: 40px;
-  }
-  .not-show{
-    height: 40px;
-    overflow: hidden;
-  }
-}
 </style>

src/components/SearchForm/components/BaseFormItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-form-item :label="config?.label" v-if="config.type === 'input'" style="width: 100%">
+    <el-input v-model="value" v-bind="$attrs" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'select'" style="width: 100%">
+    <el-select v-model="value" v-bind="$attrs" style="width: 100%">
+      <el-option
+        v-for="item in config.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'date-picker'" style="width: 100%">
+    <el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'cascader'" style="width: 100%">
+    <el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'time-select'" style="width: 100%">
+    <el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  type ConfigType = {
+    modelValue?: any
+    config?: any
+  }
+
+  const props = defineProps<ConfigType>()
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: any): void
+  }>()
+
+  const value = computed({
+    get() {
+      return props?.modelValue
+    },
+    set(value) {
+      emits('update:modelValue', value)
+    },
+  })
+</script>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  }
+</script>
+<style lang="less" scoped></style>

src/components/SearchForm/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="advancedForm">
+    <el-form
+      ref="ruleFormRef"
+      :inline="true"
+      :label-position="'right'"
+      :model="formParams"
+      class="form-inline"
+    >
+      <el-row
+        :class="{
+          'not-show': byHeight && !isExpand,
+        }"
+        :gutter="gutterWidth"
+      >
+        <el-col
+          :span="item.span"
+          v-for="(item, index) in columns"
+          :key="item.name"
+          v-show="byHeight ? true : index < showRow * 3 || isExpand"
+        >
+          <BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="search-btn">
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+      <el-button link type="primary" @click="isExpand = !isExpand" v-if="columns.length > 3">
+        {{ isExpand ? '合并' : '展开'
+        }}<el-icon>
+          <arrow-down v-if="!isExpand" />
+          <arrow-up v-else /> </el-icon
+      ></el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue'
+  import type { FormInstance } from 'element-plus'
+  import BaseFormItem from './components/BaseFormItem.vue'
+  const ruleFormRef = ref<FormInstance>()
+  let props = defineProps({
+    // 宽度
+    labelWidth: {
+      default: '100px',
+    },
+    gutterWidth: {
+      type: Number,
+      default: 24,
+    },
+    showRow: {
+      type: Number,
+      default: 1,
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    byHeight: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  const emit = defineEmits(['submit', 'reset'])
+  // 收缩展开
+  const isExpand = ref(false)
+  const formParams = reactive({})
+
+  const initFormParams = () => {
+    for (let item of props.columns) {
+      formParams[item.name] = item?.value
+    }
+  }
+
+  // 进行遍历获取参数
+  const getFormParams = () => {
+    let searchParams = {}
+    for (let item of props.columns) {
+      searchParams[item.name] = item?.value
+    }
+    return searchParams
+  }
+
+  onMounted(() => {
+    initFormParams()
+  })
+
+  // 获取参数进行组装为 obj
+  const onSubmit = () => {
+    let searchParams = getFormParams()
+    emit('submit', searchParams)
+  }
+
+  // 重置参数
+  const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    const keys = Object.keys(formParams)
+    keys.forEach((key) => {
+      let itemColums = props.columns.find((item) => item.name === key)
+      itemColums.value = formParams[key]
+    })
+    let searchParams = getFormParams()
+    emit('reset', searchParams)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .advancedForm {
+    display: flex;
+    justify-content: space-between;
+    .form-inline {
+      flex: 1;
+    }
+    .el-form--inline .el-form-item {
+      width: 100%;
+      margin-right: 10px;
+    }
+    .search-btn {
+      margin-left: 40px;
+    }
+    .not-show {
+      height: 40px;
+      overflow: hidden;
+    }
+  }
+</style>

src/components/Table/PropTable/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="zb-pro-table">
     <div class="header">
-      <el-form :inline="true"
+      <el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
-               class="search-form"
-               :model="formInline"  ref="ruleFormRef" >
         <template v-for="(item, index) in formSearchData" :key="index">
           <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
             <template v-if="item.valueType === 'input'">
@@ -11,13 +9,15 @@
             </template>
             <template v-if="item.valueType === 'select'">
               <el-select
-                  style="width: 100%"
+                style="width: 100%"
-                  v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
+                v-model="formInline[item.name]"
+                :placeholder="`请选择${item.label}`"
+              >
                 <el-option
-                    v-for="ite in item.options"
+                  v-for="ite in item.options"
-                    :key="ite.value"
+                  :key="ite.value"
-                    :label="ite.label"
+                  :label="ite.label"
-                    :value="ite.value"
+                  :value="ite.value"
                 />
               </el-select>
             </template>
@@ -25,11 +25,13 @@
         </template>
       </el-form>
       <div class="search">
-        <el-button type="primary" @click="onSubmit"  :icon="Search">查询</el-button>
+        <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
         <el-button @click="reset(ruleFormRef)">重置</el-button>
-        <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+        <el-button link type="primary" @click="isExpand = !isExpand"
-          <arrow-down v-if="!isExpand" />
+          >{{ isExpand ? '合并' : '展开'
-          <arrow-up v-else /> </el-icon
+          }}<el-icon>
+            <arrow-down v-if="!isExpand" />
+            <arrow-up v-else /> </el-icon
         ></el-button>
       </div>
     </div>
@@ -42,28 +44,28 @@
       <!-- ------------表格--------------->
       <div class="table">
         <el-table
-            class="zb-table"
+          class="zb-table"
-            v-loading="loading"
+          v-loading="loading"
-            @selection-change="(val) => emit('selection-change', val)"
+          @selection-change="(val) => emit('selection-change', val)"
-            :data="list"
+          :data="list"
-            :border="true"
+          :border="true"
         >
           <template v-for="item in columns">
             <el-table-column
-                v-if="item.type"
+              v-if="item.type"
-                :type="item.type"
+              :type="item.type"
-                :width="item.width"
+              :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
-                :fixed="item.fixed"
+              :fixed="item.fixed"
-                :label="item.label"
+              :label="item.label"
             />
             <el-table-column
-                v-else
+              v-else
-                :prop="item.name"
+              :prop="item.name"
-                :width="item.width"
+              :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
-                :fixed="item.fixed"
+              :fixed="item.fixed"
-                :label="item.label"
+              :label="item.label"
             >
               <template #default="scope">
                 <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
@@ -76,174 +78,174 @@
       <!-- ------------分页--------------->
       <div class="pagination">
         <el-pagination
-            v-model:currentPage="currentPage1"
+          v-model:currentPage="currentPage1"
-            :page-size="10"
+          :page-size="10"
-            background
+          background
-            layout="total, sizes, prev, pager, next, jumper"
+          layout="total, sizes, prev, pager, next, jumper"
-            :total="data.length"
+          :total="data.length"
-            @size-change="handleSizeChange"
+          @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
+          @current-change="handleCurrentChange"
         />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+  import { computed, ref } from 'vue'
-import {Search } from '@element-plus/icons-vue'
+  import { Search } from '@element-plus/icons-vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+  const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
-let props = defineProps({
+  let props = defineProps({
-  columns: {
+    columns: {
-    type: Array,
+      type: Array,
-    default: () => [],
+      default: () => [],
-  },
+    },
-  data: {
+    data: {
-    type: Array,
+      type: Array,
-    default: () => [],
+      default: () => [],
-  },
+    },
-  loading: {
+    loading: {
-    type: Boolean,
+      type: Boolean,
-    default: false,
+      default: false,
-  },
+    },
-})
-
-const currentPage1 = ref(1)
-// 收缩展开
-const isExpand = ref(false)
-const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`)
-}
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  currentPage1.value = val
-}
-
-const list = computed(() => {
-  let arr = JSON.parse(JSON.stringify(props.data))
-  return arr.splice((currentPage1.value - 1) * 10, 10)
-})
-
-const listLoading = ref(false)
-const confirmEdit = (row) => {
-  row.edit = false
-}
-const cancelEdit = (row) => {
-  row.edit = false
-}
-
-import { reactive } from 'vue'
-
-let obj = {}
-let search = []
-for (let item of props.columns) {
-  if (item.inSearch) {
-    obj[item.name] = null
-  }
-  if (item.inSearch) {
-    search.push(item)
-  }
-}
-const formSearchData = ref(search)
-const formInline = reactive(obj)
-
-const onSubmit = () => {
-  console.log('submit!', formInline)
-  emit('onSubmit', formInline)
-}
-
-const reset = (formEl: FormInstance | undefined) => {
-  formSearchData.value.forEach((item) => {
-    formInline[item.name] = null
   })
-  emit('reset')
+
-}
+  const currentPage1 = ref(1)
-const deleteAction = (row) => {
+  // 收缩展开
-  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+  const isExpand = ref(false)
-    confirmButtonText: '确定',
+  const handleSizeChange = (val: number) => {
-    cancelButtonText: '取消',
+    console.log(`${val} items per page`)
-    type: 'warning',
+  }
-    draggable: true,
+  const handleCurrentChange = (val: number) => {
+    console.log(`current page: ${val}`)
+    currentPage1.value = val
+  }
+
+  const list = computed(() => {
+    let arr = JSON.parse(JSON.stringify(props.data))
+    return arr.splice((currentPage1.value - 1) * 10, 10)
   })
+
+  const listLoading = ref(false)
+  const confirmEdit = (row) => {
+    row.edit = false
+  }
+  const cancelEdit = (row) => {
+    row.edit = false
+  }
+
+  import { reactive } from 'vue'
+
+  let obj = {}
+  let search = []
+  for (let item of props.columns) {
+    if (item.inSearch) {
+      obj[item.name] = null
+    }
+    if (item.inSearch) {
+      search.push(item)
+    }
+  }
+  const formSearchData = ref(search)
+  const formInline = reactive(obj)
+
+  const onSubmit = () => {
+    console.log('submit!', formInline)
+    emit('onSubmit', formInline)
+  }
+
+  const reset = (formEl: FormInstance | undefined) => {
+    formSearchData.value.forEach((item) => {
+      formInline[item.name] = null
+    })
+    emit('reset')
+  }
+  const deleteAction = (row) => {
+    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true,
+    })
       .then(() => {
         list.value = list.value.filter((item) => item.id !== row.id)
         ElMessage.success('删除成功')
       })
       .catch(() => {})
-}
+  }
 </script>
 <style scoped lang="scss">
-.edit-input {
+  .edit-input {
-  padding-right: 100px;
+    padding-right: 100px;
-}
+  }
-.cancel-btn {
+  .cancel-btn {
-  position: absolute;
+    position: absolute;
-  right: 15px;
+    right: 15px;
-  top: 10px;
+    top: 10px;
-}
+  }
-.zb-pro-table {
+  .zb-pro-table {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  display:flex;
-  flex-direction:column;
-
-  .header{
     display: flex;
-    padding: 16px 16px 0 16px;
+    flex-direction: column;
-    margin-bottom: 16px;
+
-    border-radius: 4px;
+    .header {
-    background: white;
+      display: flex;
-    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+      padding: 16px 16px 0 16px;
-    .search-form{
+      margin-bottom: 16px;
-      flex: 1;
+      border-radius: 4px;
-      ::v-deep{
+      background: white;
-        .el-input--default{
+      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-          width: 200px;
+      .search-form {
+        flex: 1;
+        ::v-deep {
+          .el-input--default {
+            width: 200px;
+          }
         }
       }
+      .search {
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
     }
-    .search{
+    .footer {
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-  }
-  .footer{
-    flex: 1;
-    display: flex;
-    padding: 16px;
-    flex-direction: column;
-    border-radius: 4px;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-    min-height: 300px;
-    .operator{
-      margin-bottom: 15px
-    }
-    .table{
-      position: relative;
       flex: 1;
+      display: flex;
+      padding: 16px;
+      flex-direction: column;
+      border-radius: 4px;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+      min-height: 300px;
+      .operator {
+        margin-bottom: 15px;
+      }
+      .table {
+        position: relative;
+        flex: 1;
+      }
+      .zb-table {
+        position: absolute;
+        height: 100%;
+      }
     }
-    .zb-table{
+    ::v-deep {
-      position: absolute;
+      .el-table__header th {
-      height: 100%;
+        font-size: 15px;
+        font-weight: 700;
+        color: #252525;
+      }
+    }
+    .pagination {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding-top: 20px;
+      box-sizing: border-box;
     }
   }
-  ::v-deep{
-    .el-table__header th{
-      font-size: 15px;
-      font-weight: 700;
-      color: #252525;
-    }
-  }
-  .pagination{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-}
 </style>

src/components/Table/PropTable/index1.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="zb-pro-table">
+    <div class="header">
+      <el-form :inline="true"
+               class="search-form"
+               :model="formInline"  ref="ruleFormRef" >
+        <template v-for="(item, index) in formSearchData" :key="index">
+          <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
+            <template v-if="item.valueType === 'input'">
+              <el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
+            </template>
+            <template v-if="item.valueType === 'select'">
+              <el-select
+                  style="width: 100%"
+                  v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
+                <el-option
+                    v-for="ite in item.options"
+                    :key="ite.value"
+                    :label="ite.label"
+                    :value="ite.value"
+                />
+              </el-select>
+            </template>
+          </el-form-item>
+        </template>
+      </el-form>
+      <div class="search">
+        <el-button type="primary" @click="onSubmit"  :icon="Search">查询</el-button>
+        <el-button @click="reset(ruleFormRef)">重置</el-button>
+        <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+          <arrow-down v-if="!isExpand" />
+          <arrow-up v-else /> </el-icon
+        ></el-button>
+      </div>
+    </div>
+    <!----------底部---------------------->
+    <div class="footer">
+      <!-----------工具栏操作工具----------------->
+      <div class="operator">
+        <slot name="btn"></slot>
+      </div>
+      <!-- ------------表格--------------->
+      <div class="table">
+        <el-table
+            class="zb-table"
+            v-loading="loading"
+            @selection-change="(val) => emit('selection-change', val)"
+            :data="list"
+            :border="true"
+        >
+          <template v-for="item in columns">
+            <el-table-column
+                v-if="item.type"
+                :type="item.type"
+                :width="item.width"
+                :align="item.align!=null?item.align:'center'"
+                :fixed="item.fixed"
+                :label="item.label"
+            />
+            <el-table-column
+                v-else
+                :prop="item.name"
+                :width="item.width"
+                :align="item.align!=null?item.align:'center'"
+                :fixed="item.fixed"
+                :label="item.label"
+            >
+              <template #default="scope">
+                <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
+                <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </div>
+      <!-- ------------分页--------------->
+      <div class="pagination">
+        <el-pagination
+            v-model:currentPage="currentPage1"
+            :page-size="10"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="data.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import {Search } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+const ruleFormRef = ref<FormInstance>()
+const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+let props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPage1 = ref(1)
+// 收缩展开
+const isExpand = ref(false)
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  currentPage1.value = val
+}
+
+const list = computed(() => {
+  let arr = JSON.parse(JSON.stringify(props.data))
+  return arr.splice((currentPage1.value - 1) * 10, 10)
+})
+
+const listLoading = ref(false)
+const confirmEdit = (row) => {
+  row.edit = false
+}
+const cancelEdit = (row) => {
+  row.edit = false
+}
+
+import { reactive } from 'vue'
+
+let obj = {}
+let search = []
+for (let item of props.columns) {
+  if (item.inSearch) {
+    obj[item.name] = null
+  }
+  if (item.inSearch) {
+    search.push(item)
+  }
+}
+const formSearchData = ref(search)
+const formInline = reactive(obj)
+
+const onSubmit = () => {
+  console.log('submit!', formInline)
+  emit('onSubmit', formInline)
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  formSearchData.value.forEach((item) => {
+    formInline[item.name] = null
+  })
+  emit('reset')
+}
+const deleteAction = (row) => {
+  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        list.value = list.value.filter((item) => item.id !== row.id)
+        ElMessage.success('删除成功')
+      })
+      .catch(() => {})
+}
+</script>
+<style scoped lang="scss">
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.zb-pro-table {
+  width: 100%;
+  height: 100%;
+  display:flex;
+  flex-direction:column;
+
+  .header{
+    display: flex;
+    padding: 16px 16px 0 16px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    .search-form{
+      flex: 1;
+      ::v-deep{
+        .el-input--default{
+          width: 200px;
+        }
+      }
+    }
+    .search{
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+  }
+  .footer{
+    flex: 1;
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    border-radius: 4px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    min-height: 300px;
+    .operator{
+      margin-bottom: 15px
+    }
+    .table{
+      position: relative;
+      flex: 1;
+    }
+    .zb-table{
+      position: absolute;
+      height: 100%;
+    }
+  }
+  ::v-deep{
+    .el-table__header th{
+      font-size: 15px;
+      font-weight: 700;
+      color: #252525;
+    }
+  }
+  .pagination{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/layout/components/Main/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="app-main" >
+  <div class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-slide" mode="out-in" appear>
         <keep-alive :include="cacheRoutes" v-if="isReload">
-          <component :is="useWrapComponents(Component,route)" :key="route.path" />
+          <component :is="useWrapComponents(Component, route)" :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="ts" setup>
-  import {useWrapComponents} from '@/hooks/useWrapComponents'
+  import { useWrapComponents } from '@/hooks/useWrapComponents'
   import { computed, ref } from 'vue'
-  import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
-  import {usePermissionStore} from "@/store/modules/permission"
+  import { usePermissionStore } from '@/store/modules/permission'
   const SettingStore = useSettingStore()
   const PermissionStore = usePermissionStore()
-  const cacheRoutes = computed(() =>PermissionStore.keepAliveRoutes)
+  const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes)
   const isReload = computed(() => SettingStore.isReload)
 </script>
 
@@ -28,7 +28,7 @@
     overflow-x: hidden;
     width: 100%;
     box-sizing: border-box;
-    .app-main-inner{
+    .app-main-inner {
       flex: 1;
       display: flex;
       overflow-x: hidden;

src/layout/components/Sidebar/index.vue

@@ -1,60 +1,54 @@
 <template>
-    <div  class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
+  <div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
-        <Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
+    <Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo" />
-        <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
-            <el-menu
+      <el-menu
-                    :default-active="activeMenu"
+        :default-active="activeMenu"
-                    background-color="#304156"
+        background-color="#304156"
-                    text-color="#bfcbd9"
+        text-color="#bfcbd9"
-                    :unique-opened="SettingStore.themeConfig.uniqueOpened"
+        :unique-opened="SettingStore.themeConfig.uniqueOpened"
-                    :collapse-transition="false"
+        :collapse-transition="false"
-                    class="el-menu-vertical-demo"
+        class="el-menu-vertical-demo"
-                    :collapse="isCollapse"
+        :collapse="isCollapse"
-            >
+      >
-                <SubItem
+        <SubItem v-for="route in permission_routes" :key="route.path" :item="route" />
-                        v-for="route in permission_routes"
+      </el-menu>
-                        :key="route.path"
+    </el-scrollbar>
-                        :item="route"
+  </div>
-
-                />
-            </el-menu>
-        </el-scrollbar>
-    </div>
 </template>
 
 <script lang="ts" setup>
-import Logo from './components/Logo.vue'
+  import Logo from './components/Logo.vue'
-import SubItem from '../SubMenu/SubItem.vue'
+  import SubItem from '../SubMenu/SubItem.vue'
-import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
-import {usePermissionStore} from "@/store/modules/permission"
+  import { usePermissionStore } from '@/store/modules/permission'
-import { computed } from 'vue'
+  import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+  import { useRoute } from 'vue-router'
 
-// 在setup中获取store
+  // 在setup中获取store
-const route = useRoute()
+  const route = useRoute()
-const PermissionStore = usePermissionStore()
+  const PermissionStore = usePermissionStore()
-const SettingStore = useSettingStore()
+  const SettingStore = useSettingStore()
 
-// 是否折叠
+  // 是否折叠
-const isCollapse = computed(() => !SettingStore.isCollapse)
+  const isCollapse = computed(() => !SettingStore.isCollapse)
-// 设置
+  // 设置
-const themeConfig = computed(() =>SettingStore.themeConfig )
+  const themeConfig = computed(() => SettingStore.themeConfig)
 
-// 获取路由
+  // 获取路由
-const permission_routes = computed(() => PermissionStore.permission_routes)
+  const permission_routes = computed(() => PermissionStore.permission_routes)
 
-const activeMenu = computed(() => {
+  const activeMenu = computed(() => {
     const { meta, path } = route
-    // if set path, the sidebar will highlight the path you set
     if (meta.activeMenu) {
-        return meta.activeMenu
+      return meta.activeMenu
     }
     return path
-})
+  })
 </script>
 
 <style lang="scss">
-.el-menu-vertical-demo:not(.el-menu--collapse) {
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
-  height: 100%;
+    height: 100%;
-}
+  }
 </style>

src/layout/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="g-container-layout" :class="classObj">
-    <Mobile/>
+    <Mobile />
-    <LayoutVertical v-if="device === 'mobile'"/>
+    <LayoutVertical v-if="device === 'mobile'" />
-    <component :is="LayoutComponents[themeConfig.mode]" v-else/>
+    <component :is="LayoutComponents[themeConfig.mode]" v-else />
     <Theme />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed,watch } from 'vue'
+  import { computed, watch } from 'vue'
   import Theme from '@/components/Theme/index.vue'
   import Mobile from './components/Mobile/index.vue'
-  import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
   import { useResizeHandler } from '@/hooks/useResizeHandler'
   import LayoutVertical from './LayoutVertical/index.vue'
   import LayoutHorizontal from './LayoutHorizontal/index.vue'
@@ -23,7 +23,7 @@
     horizontal: LayoutHorizontal,
     vertical: LayoutVertical,
     columns: LayoutColumns,
-  };
+  }
 
   // 是否折叠
   const isCollapse = computed(() => {
@@ -31,14 +31,17 @@
   })
   let { device } = useResizeHandler()
 
-  watch(()=>device.value,(val)=>{
+  watch(
-    let vertical = val==='mobile'?'vertical':themeConfig.value.mode
+    () => device.value,
-    const body = document.body as HTMLElement;
+    (val) => {
-    body.setAttribute("class", `layout-${vertical}`);
+      let vertical = val === 'mobile' ? 'vertical' : themeConfig.value.mode
-  },{
+      const body = document.body as HTMLElement
-    immediate:true
+      body.setAttribute('class', `layout-${vertical}`)
-  })
+    },
-
+    {
+      immediate: true,
+    },
+  )
 
   // 当屏幕切换的时候进行变换
   const classObj = computed(() => {
@@ -49,7 +52,6 @@
       mobile: device.value === 'mobile',
     }
   })
-
 </script>
 
 <style lang="scss" scoped>

src/routers/index.ts

@@ -1,8 +1,14 @@
-import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory,Router } from 'vue-router'
+import {
-import Layout from "@/layout/index.vue";
+  createRouter,
+  createWebHistory,
+  RouteRecordRaw,
+  createWebHashHistory,
+  Router,
+} from 'vue-router'
+import Layout from '@/layout/index.vue'
 // 扩展继承属性
 interface extendRoute {
-    hidden?:boolean
+  hidden?: boolean
 }
 //
 import tableRouter from './modules/table'
@@ -17,20 +23,19 @@ import externalLink from './modules/externalLink'
 import formRouter from './modules/form'
 import functionPageRouter from './modules/functionPage'
 
-
 // 异步组件
 export const asyncRoutes = [
-    ...dataScreenRouter,
+  ...dataScreenRouter,
-    ...echartsRouter,
+  ...echartsRouter,
-    ...tableRouter,
+  ...tableRouter,
-    ...formRouter,
+  ...formRouter,
-    ...othersRouter,
+  ...othersRouter,
-    ...functionPageRouter,
+  ...functionPageRouter,
-    ...chatRouter,
+  ...chatRouter,
-    ...nestedRouter,
+  ...nestedRouter,
-    ...excelRouter,
+  ...excelRouter,
-    ...externalLink,
+  ...externalLink,
-    ...systemRouter,
+  ...systemRouter,
 ]
 
 /**
@@ -46,42 +51,43 @@ export const asyncRoutes = [
  * meta.icon ==> 菜单icon
  * meta.affix ==> 如果设置为true将会出现在 标签栏中
  * meta.breadcrumb ==> 如果设置为false，该项将隐藏在breadcrumb中（默认值为true）
+ * meta.activeMenu ==> 详情页的时候可以设置菜单高亮 ,高亮菜单的path
  */
 
-export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
+export const constantRoutes: Array<RouteRecordRaw & extendRoute> = [
-    {
+  {
-        path: "/404",
+    path: '/404',
-        name: "404",
+    name: '404',
-        component: () => import("@/views/errorPages/404.vue"),
+    component: () => import('@/views/errorPages/404.vue'),
-        hidden:true,
+    hidden: true,
-    },
+  },
-    {
+  {
-        path: "/403",
+    path: '/403',
-        name: "403",
+    name: '403',
-        component: () => import("@/views/errorPages/403.vue"),
+    component: () => import('@/views/errorPages/403.vue'),
-        hidden:true,
+    hidden: true,
-    },
+  },
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/login/index.vue'),
     hidden: true,
-    meta: { title: '登录',}
+    meta: { title: '登录' },
   },
   {
     path: '/',
     name: 'layout',
     component: Layout,
     redirect: '/home',
-    meta: { title: '首页', icon: 'House', },
+    meta: { title: '首页', icon: 'House' },
     children: [
       {
         path: '/home',
         component: () => import('@/views/home/index.vue'),
         name: 'home',
-        meta: { title: '首页', icon: 'House', affix: true ,role:['other']}
+        meta: { title: '首页', icon: 'House', affix: true, role: ['other'] },
       },
-    ]
+    ],
   },
 ]
 
@@ -89,16 +95,15 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
  * notFoundRouter(找不到路由)
  */
 export const notFoundRouter = {
-    path: '/:pathMatch(.*)',
+  path: '/:pathMatch(.*)',
-    name: "notFound",
+  name: 'notFound',
-    redirect: '/404'
+  redirect: '/404',
-};
+}
-
 
 const router = createRouter({
   // history: createWebHistory(process.env.BASE_URL), // history
   history: createWebHashHistory(), // hash
-  routes:constantRoutes
+  routes: constantRoutes,
 })
 
 export default router

src/routers/modules/form.ts

@@ -1,44 +1,51 @@
-
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from "@/layout/index.vue";
+import Layout from '@/layout/index.vue'
 
-const formRouter = [{
+const formRouter = [
+  {
     path: '/form',
     component: Layout,
     redirect: '/form/validateForm',
     name: 'form',
-    alwaysShow:true,
+    alwaysShow: true,
     meta: {
-        title: '超级表单',
+      title: '超级表单',
-        icon: 'Grape'
+      icon: 'Grape',
     },
     children: [
-        {
+      {
-            path: '/form/validateForm',
+        path: '/form/validateForm',
-            component: () => import('@/views/form/validateForm/index.vue'),
+        component: () => import('@/views/form/validateForm/index.vue'),
-            name: 'validateForm',
+        name: 'validateForm',
-            meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '校验 Form', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-        {
+      {
-            path: '/form/advancedForm',
+        path: '/form/advancedForm',
-            component: () => import('@/views/form/advancedForm/index.vue'),
+        component: () => import('@/views/form/advancedForm/index.vue'),
-            name: 'advancedForm',
+        name: 'advancedForm',
-            meta: { title: '收缩 Form',  icon: 'MenuIcon'}
+        meta: { title: '收缩 Form', icon: 'MenuIcon' },
-        },
+      },
-        {
+      {
-            path: '/form/appendForm',
+        path: '/form/appendForm',
-            component: () => import('@/views/form/appendForm/index.vue'),
+        component: () => import('@/views/form/appendForm/index.vue'),
-            name: 'appendForm',
+        name: 'appendForm',
-            meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '增删 Form', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-        {
+      {
-            path: '/form/moreForm',
+        path: '/form/moreForm',
-            component: () => import('@/views/form/moreForm/index.vue'),
+        component: () => import('@/views/form/moreForm/index.vue'),
-            name: 'moreForm',
+        name: 'moreForm',
-            meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '多表单验证', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-    ]
+      {
-}]
+        path: '/form/searchForm',
+        component: () => import('@/views/form/searchForm/index.vue'),
+        name: 'searchForm',
+        meta: { title: '查询 Form', keepAlive: true, icon: 'MenuIcon' },
+      },
+    ],
+  },
+]
 
 export default formRouter

src/routers/modules/other.ts

@@ -2,108 +2,109 @@
 
 import Layout from '@/layout/index.vue'
 
-const othersRouter = [{
+const othersRouter = [
-  path: '/other',
+  {
-  component: Layout,
+    path: '/other',
-  redirect: '/other/clipboard',
+    component: Layout,
-  name: 'other',
+    redirect: '/other/clipboard',
-  meta: {
+    name: 'other',
-    title: '常用组件',
+    meta: {
-    icon: 'management'
+      title: '常用组件',
+      icon: 'management',
+    },
+    children: [
+      {
+        path: '/other/clipboard',
+        component: () => import('@/views/other/clipboard/index.vue'),
+        name: 'clipboard',
+        meta: { title: '剪贴板', roles: ['other'], icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/editor',
+        component: () => import('@/views/other/editor/index.vue'),
+        name: 'editor',
+        meta: { title: '富文本编辑器', roles: ['other'], icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/code-mirror',
+        component: () => import('@/views/other/codeMirror/index.vue'),
+        name: 'code-mirror',
+        meta: { title: '代码编辑器', roles: ['other'], icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/mark-down',
+        component: () => import('@/views/other/markDown/index.vue'),
+        name: 'mark-down',
+        meta: { title: 'markDown', roles: ['other'], icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/print',
+        component: () => import('@/views/other/print/index.vue'),
+        name: 'print',
+        meta: { title: '打印', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/cropper',
+        component: () => import('@/views/other/cropper/index.vue'),
+        name: 'cropper',
+        meta: { title: '头像裁剪', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/card-drag',
+        component: () => import('@/views/other/cardDrag/index.vue'),
+        name: 'card-drag',
+        meta: { title: '卡片拖拽', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/upload',
+        component: () => import('@/views/other/upload/index.vue'),
+        name: 'upload',
+        meta: { title: '上传图片', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/qrcode',
+        component: () => import('@/views/other/qrcode/index.vue'),
+        name: 'qrcode',
+        meta: { title: '生成二维码', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/svgIcon',
+        component: () => import('@/views/other/svgIcon/index.vue'),
+        name: 'svgIcon',
+        meta: { title: 'svg 图标', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/iconfont',
+        component: () => import('@/views/other/iconfont/index.vue'),
+        name: 'iconfont',
+        meta: { title: '阿里图标库', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/water-marker',
+        component: () => import('@/views/other/waterMarker/index.vue'),
+        name: 'water-marker',
+        meta: { title: '生成水印', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/right-menu',
+        component: () => import('@/views/other/rightMenu/index.vue'),
+        name: 'right-menu',
+        meta: { title: '右键菜单', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/count',
+        component: () => import('@/views/other/count/index.vue'),
+        name: 'count',
+        meta: { title: '数字动画', icon: 'MenuIcon' },
+      },
+      {
+        path: '/other/text-clamp',
+        component: () => import('@/views/other/textClamp/index.vue'),
+        name: 'text-clamp',
+        meta: { title: '多行文本省略', icon: 'MenuIcon' },
+      },
+    ],
   },
-  children: [
+]
-    {
-      path: '/other/clipboard',
-      component: () => import('@/views/other/clipboard/index.vue'),
-      name: 'clipboard',
-      meta: { title: '剪贴板',  roles:['other'] ,icon: 'MenuIcon',}
-    },
-    {
-      path: '/other/editor',
-      component: () => import('@/views/other/editor/index.vue'),
-      name: 'editor',
-      meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/code-mirror',
-      component: () => import('@/views/other/codeMirror/index.vue'),
-      name: 'code-mirror',
-      meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/mark-down',
-      component: () => import('@/views/other/markDown/index.vue'),
-      name: 'mark-down',
-      meta: { title: 'markDown', roles: ['other'] , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/print',
-      component: () => import('@/views/other/print/index.vue'),
-      name: 'print',
-      meta: { title: '打印' , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/cropper',
-      component: () => import('@/views/other/cropper/index.vue'),
-      name: 'cropper',
-      meta: { title: '头像裁剪' , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/card-drag',
-      component: () => import('@/views/other/cardDrag/index.vue'),
-      name: 'card-drag',
-      meta: { title: '卡片拖拽', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/upload',
-      component: () => import('@/views/other/upload/index.vue'),
-      name: 'upload',
-      meta: { title: '上传图片', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/qrcode',
-      component: () => import('@/views/other/qrcode/index.vue'),
-      name: 'qrcode',
-      meta: { title: '生成二维码', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/svgIcon',
-      component: () => import('@/views/other/svgIcon/index.vue'),
-      name: 'svgIcon',
-      meta: { title: 'svg 图标', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/iconfont',
-      component: () => import('@/views/other/iconfont/index.vue'),
-      name: 'iconfont',
-      meta: { title: '阿里图标库', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/water-marker',
-      component: () => import('@/views/other/waterMarker/index.vue'),
-      name: 'water-marker',
-      meta: { title: '生成水印' , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/right-menu',
-      component: () => import('@/views/other/rightMenu/index.vue'),
-      name: 'right-menu',
-      meta: { title: '右键菜单' , icon: 'MenuIcon'}
-    },
-    {
-      path: '/other/count',
-      component: () => import('@/views/other/count/index.vue'),
-      name: 'count',
-      meta: { title: '数字动画', icon: 'MenuIcon' }
-    },
-    {
-      path: '/other/text-clamp',
-      component: () => import('@/views/other/textClamp/index.vue'),
-      name: 'text-clamp',
-      meta: { title: '多行文本省略', icon: 'MenuIcon' }
-    },
-
-  ]
-}]
 
 export default othersRouter

src/routers/modules/table.ts

@@ -1,43 +1,44 @@
-
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from "@/layout/index.vue";
+import Layout from '@/layout/index.vue'
 
-const tableRouter = [{
+const tableRouter = [
+  {
     path: '/table',
     component: Layout,
     redirect: '/table/comprehensive',
     name: 'table',
     meta: {
-        title: '超级表格',
+      title: '超级表格',
-        icon: 'School'
+      icon: 'School',
     },
     children: [
-        {
+      {
-            path: '/table/comprehensive',
+        path: '/table/comprehensive',
-            component: () => import('@/views/table/ComprehensiveTable/index.vue'),
+        component: () => import('@/views/table/ComprehensiveTable/index.vue'),
-            name: 'comprehensive',
+        name: 'comprehensive',
-            meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '综合表格', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-        {
+      {
-            path: '/table/inlineTable',
+        path: '/table/inlineTable',
-            component: () => import('@/views/table/InlineEditTable/index.vue'),
+        component: () => import('@/views/table/InlineEditTable/index.vue'),
-            name: 'inlineTable',
+        name: 'inlineTable',
-            meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
+        meta: { title: '行内编辑', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-        {
+      {
-            path: '/table/editableProTable',
+        path: '/table/editableProTable',
-            component: () => import('@/views/table/EditableProTable/index.vue'),
+        component: () => import('@/views/table/EditableProTable/index.vue'),
-            name: 'editableProTable',
+        name: 'editableProTable',
-            meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
+        meta: { title: '可编辑表格', keepAlive: true, icon: 'MenuIcon' },
-        },
+      },
-        // {
+      // {
-        //     path: 'virtualTable',
+      //     path: 'virtualTable',
-        //     component: () => import('@/views/table/VirtualTable.vue'),
+      //     component: () => import('@/views/table/VirtualTable.vue'),
-        //     name: 'virtualTable',
+      //     name: 'virtualTable',
-        //     meta: { title: '虚拟表格', keepAlive: true  , icon: 'MenuIcon'}
+      //     meta: { title: '虚拟表格', keepAlive: true  , icon: 'MenuIcon'}
-        // },
+      // },
-    ]
+    ],
-}]
+  },
+]
 
 export default tableRouter

src/views/form/searchForm/constants.tsx

@@ -0,0 +1,119 @@
+export const baseSearchColumns = [
+  {
+    type: 'input',
+    name: 'name1',
+    label: '字段1',
+    span: 8,
+    value: '字段1',
+    attrs: {
+      placeholder: '请输入字段1',
+      clearable: true,
+    },
+  },
+  {
+    type: 'select',
+    name: 'name2',
+    label: '字段2',
+    value: '',
+    placeholder: '字段2',
+    span: 8,
+    options: [
+      { value: 'Option1', label: 'Option1' },
+      { value: 'Option2', label: 'Option2' },
+      { value: 'Option3', label: 'Option3' },
+      { value: 'Option4', label: 'Option4' },
+      { value: 'Option5', label: 'Option5' },
+    ],
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name3',
+    label: '时间',
+    span: 8,
+    value: null,
+    attrs: {
+      placeholder: '请选择时间',
+      clearable: true,
+      type: 'date',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name4',
+    label: '时间秒',
+    span: 8,
+    value: null,
+    attrs: {
+      placeholder: '请选择时间',
+      clearable: true,
+      type: 'datetime',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name5',
+    label: '时间范围',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择时间范围',
+      clearable: true,
+      type: 'daterange',
+      valueFormat: 'YYYY-MM-DD',
+      'start-placeholder': '开始时间',
+      'end-placeholder': '结束时间',
+    },
+  },
+  {
+    type: 'time-select',
+    name: 'name6',
+    label: '时间选择',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+    },
+  },
+  {
+    type: 'cascader',
+    name: 'name7',
+    label: '级联选择器',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+      options: [
+        {
+          value: 'disciplines',
+          label: 'Disciplines',
+          children: [
+            {
+              value: 'consistency',
+              label: 'Consistency',
+            },
+            {
+              value: 'feedback',
+              label: 'Feedback',
+            },
+            {
+              value: 'efficiency',
+              label: 'Efficiency',
+            },
+            {
+              value: 'controllability',
+              label: 'Controllability',
+            },
+          ],
+        },
+      ],
+    },
+  },
+]

src/views/form/searchForm/index.scss

@@ -0,0 +1,3 @@
+.searchdForm{
+  padding: 20px;
+}

src/views/form/searchForm/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <PageWrapLayout>
+    <SearchForm :columns="searchColumns" @submit="onSubmit" @reset="resetForm" />
+
+    <div v-if="Object.keys(formValue).length">{{ formValue }}</div>
+  </PageWrapLayout>
+</template>
+
+<script lang="ts" setup>
+  import SearchForm from '@/components/SearchForm/index.vue'
+  import { ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { baseSearchColumns } from './constants'
+
+  const formValue = ref({})
+  const searchColumns = ref(baseSearchColumns)
+
+  // 查询
+  const onSubmit = (formInline) => {
+    console.log('获取参数', formInline)
+    formValue.value = formInline
+    ElMessage.success(JSON.stringify(formInline))
+  }
+
+  // 重置
+  const resetForm = (formInline) => {
+    console.log('获取参数', formInline)
+    formValue.value = formInline
+    ElMessage.success('重置成功')
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import './index.scss';
+</style>

src/views/table/ComprehensiveTable/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="app-container" ref="appContainer">
     <PropTable
-        :loading="loading"
+      :loading="loading"
-        @selection-change="selectionChange"
+      @selection-change="selectionChange"
-        :columns="column"
+      :columns="column"
-        :data="list"
+      :data="list"
-        @reset="reset"
+      @reset="reset"
-        @onSubmit="onSubmit"
+      @onSubmit="onSubmit"
     >
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="primary" @click="add"
-          ><el-icon><plus /></el-icon> 添加</el-button
+            ><el-icon><plus /></el-icon> 添加</el-button
           >
           <el-button type="danger" @click="batchDelete"
-          ><el-icon><delete /></el-icon>删除</el-button
+            ><el-icon><delete /></el-icon>删除</el-button
           >
         </div>
       </template>
@@ -31,12 +31,12 @@
 
     <el-dialog v-model="dialogVisible" :title="title" width="50%">
       <el-form
-          ref="ruleFormRef"
+        ref="ruleFormRef"
-          :model="ruleForm"
+        :model="ruleForm"
-          :rules="rules"
+        :rules="rules"
-          label-width="120px"
+        label-width="120px"
-          class="demo-ruleForm"
+        class="demo-ruleForm"
-          :size="formSize"
+        :size="formSize"
       >
         <el-form-item label="活动名称" prop="name">
           <el-input v-model="ruleForm.name" />
@@ -52,175 +52,175 @@
         </el-form-item>
       </el-form>
       <template #footer>
-          <span class="dialog-footer">
+        <span class="dialog-footer">
-            <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
-            <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
+          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
-          </span>
+        </span>
       </template>
     </el-dialog>
   </div>
 </template>
 <script lang="ts" setup name="comprehensive">
-import {ref, reactive, onMounted, nextTick} from 'vue'
+  import { ref, reactive, onMounted, nextTick } from 'vue'
-import * as dayjs from 'dayjs'
+  import * as dayjs from 'dayjs'
-import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-const loading = ref(true)
+  const loading = ref(true)
-const appContainer = ref(null)
+  const appContainer = ref(null)
-import PropTable from '@/components/Table/PropTable/index.vue'
+  import PropTable from '@/components/Table/PropTable/index.vue'
-const data = []
+  const data = []
-for (let i = 0; i < 100; i++) {
+  for (let i = 0; i < 100; i++) {
-  data.push({
+    data.push({
-    date: '2016-05-02',
+      date: '2016-05-02',
-    name: '王五' + i,
+      name: '王五' + i,
-    price: 1 + i,
+      price: 1 + i,
-    province: '上海',
+      province: '上海',
-    admin: 'admin',
+      admin: 'admin',
-    sex: i % 2 ? 1 : 0,
+      sex: i % 2 ? 1 : 0,
-    checked: true,
+      checked: true,
-    id: i + 1,
+      id: i + 1,
-    age: 0,
+      age: 0,
-    city: '普陀区',
+      city: '普陀区',
-    address: '上海市普上海',
+      address: '上海市普上海',
-    zip: 200333,
+      zip: 200333,
+    })
+  }
+  const column = [
+    { type: 'selection', width: 60, fixed: 'left' },
+    { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
+    { name: 'age', label: '年龄', align: 'right' },
+    {
+      name: 'sex',
+      label: '性别',
+      slot: true,
+      inSearch: true,
+      options: [
+        {
+          value: 1,
+          label: '男',
+        },
+        {
+          value: 0,
+          label: '女',
+        },
+      ],
+      valueType: 'select',
+    },
+    { name: 'price', label: '价格', inSearch: true, valueType: 'input' },
+    { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
+    { name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
+    { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
+    { name: 'province', label: '省份', width: 100 },
+    { name: 'city', label: '城市' },
+    { name: 'zip', label: '邮编' },
+    { name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
+  ]
+  const list = ref(data)
+
+  const formSize = ref('default')
+  const ruleFormRef = ref<FormInstance>()
+  const ruleForm = reactive({
+    name: '',
+    sex: null,
+    price: null,
   })
-}
+
-const column = [
+  const rules = reactive({
-  { type: 'selection', width: 60 ,fixed: 'left'},
+    name: [
-  { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
+      { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
-  { name: 'age', label: '年龄', align: 'right' },
+      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-  {
+    ],
-    name: 'sex',
+    price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
-    label: '性别',
+    sex: [
-    slot: true,
-    inSearch: true,
-    options: [
       {
-        value: 1,
+        required: true,
-        label: '男',
+        message: '请选择性别',
-      },
+        trigger: 'change',
-      {
-        value: 0,
-        label: '女',
       },
     ],
-    valueType: 'select',
+  })
-  },
-  {name: 'price', label: '价格', inSearch: true, valueType: 'input',},
-  { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
-  { name: 'address', label: '地址', inSearch: true, valueType: 'input' , width: 180},
-  { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
-  { name: 'province', label: '省份' , width: 100},
-  { name: 'city', label: '城市' },
-  { name: 'zip', label: '邮编' },
-  { name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作'  },
-]
-const list = ref(data)
 
-const formSize = ref('default')
+  const dialogVisible = ref(false)
-const ruleFormRef = ref<FormInstance>()
+  const title = ref('新增')
-const ruleForm = reactive({
+  const rowObj = ref({})
-  name: '',
+  const selectObj = ref([])
-  sex: null,
-  price: null,
-})
 
-const rules = reactive({
+  const handleClose = async (done: () => void) => {
-  name: [
+    await ruleFormRef.value.validate((valid, fields) => {
-    { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
+      if (valid) {
-    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+        let obj = {
-  ],
+          id: Date.now(),
-  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+          ...ruleForm,
-  sex: [
+          age: 0,
-    {
+          city: '普陀区',
-      required: true,
+          address: '上海市普上海',
-      message: '请选择性别',
+          zip: 200333,
-      trigger: 'change',
+          province: '上海',
-    },
+          admin: 'admin',
-  ],
+          date: dayjs().format('YYYY-MM-DD'),
-})
+        }
-
+        if (title.value === '新增') {
-const dialogVisible = ref(false)
+          list.value = [obj, ...list.value]
-const title = ref('新增')
+          ElMessage.success('添加成功')
-const rowObj = ref({})
+        } else {
-const selectObj = ref([])
+          list.value.forEach((item) => {
-
+            if (item.id === rowObj.value.id) {
-const handleClose = async (done: () => void) => {
+              item.name = obj.name
-  await ruleFormRef.value.validate((valid, fields) => {
+              item.sex = obj.sex
-    if (valid) {
+              item.price = obj.price
-      let obj = {
+            }
-        id: Date.now(),
+          })
-        ...ruleForm,
+        }
-        age: 0,
+        dialogVisible.value = false
-        city: '普陀区',
+        console.log('submit!', obj)
-        address: '上海市普上海',
-        zip: 200333,
-        province: '上海',
-        admin: 'admin',
-        date: dayjs().format('YYYY-MM-DD'),
-      }
-      if (title.value === '新增') {
-        list.value = [obj, ...list.value]
-        ElMessage.success('添加成功')
       } else {
-        list.value.forEach((item) => {
+        console.log('error submit!', fields)
-          if (item.id === rowObj.value.id) {
-            item.name = obj.name
-            item.sex = obj.sex
-            item.price = obj.price
-          }
-        })
       }
-      dialogVisible.value = false
+    })
-      console.log('submit!', obj)
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-
-const add = () => {
-  title.value = '新增'
-  dialogVisible.value = true
-}
-
-const batchDelete = () => {
-  if (!selectObj.value.length) {
-    return ElMessage.error('未选中任何行')
   }
-  ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
+
-    confirmButtonText: '确定',
+  const add = () => {
-    cancelButtonText: '取消',
+    title.value = '新增'
-    type: 'warning',
+    dialogVisible.value = true
-    draggable: true,
+  }
-  })
+
+  const batchDelete = () => {
+    if (!selectObj.value.length) {
+      return ElMessage.error('未选中任何行')
+    }
+    ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true,
+    })
       .then(() => {
         ElMessage.success('模拟删除成功')
         list.value = list.value.concat([])
       })
       .catch(() => {})
-}
+  }
-const selectionChange = (val) => {
+  const selectionChange = (val) => {
-  selectObj.value = val
+    selectObj.value = val
-}
+  }
 
-const edit = (row) => {
+  const edit = (row) => {
-  title.value = '编辑'
+    title.value = '编辑'
-  rowObj.value = row
+    rowObj.value = row
-  dialogVisible.value = true
+    dialogVisible.value = true
-  ruleForm.name = row.name
+    ruleForm.name = row.name
-  ruleForm.sex = row.sex
+    ruleForm.sex = row.sex
-  ruleForm.price = row.price
+    ruleForm.price = row.price
-}
+  }
 
-const del = (row) => {
+  const del = (row) => {
-  console.log('row==', row)
+    console.log('row==', row)
-  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
-    confirmButtonText: '确定',
+      confirmButtonText: '确定',
-    cancelButtonText: '取消',
+      cancelButtonText: '取消',
-    type: 'warning',
+      type: 'warning',
-    draggable: true,
+      draggable: true,
-  })
+    })
       .then(() => {
         list.value = list.value.filter((item) => item.id !== row.id)
         ElMessage.success('删除成功')
@@ -230,53 +230,51 @@ const del = (row) => {
         }, 500)
       })
       .catch(() => {})
-}
+  }
 
-const reset = () => {
+  const reset = () => {
-  loading.value = true
+    loading.value = true
-  setTimeout(() => {
+    setTimeout(() => {
-    loading.value = false
+      loading.value = false
-  }, 500)
+    }, 500)
-  ElMessage.success('触发重置方法')
+    ElMessage.success('触发重置方法')
-}
+  }
 
-const onSubmit = (val) => {
+  const onSubmit = (val) => {
-  console.log('val===', val)
+    console.log('val===', val)
-  ElMessage.success('触发查询方法')
+    ElMessage.success('触发查询方法')
-  loading.value = true
+    loading.value = true
-  setTimeout(() => {
+    setTimeout(() => {
-    loading.value = false
+      loading.value = false
-  }, 500)
+    }, 500)
-}
+  }
 
-const getHeight = ()=>{
+  const getHeight = () => {}
 
-}
+  onMounted(() => {
-
+    nextTick(() => {
-onMounted(() => {
+      // let data = appContainer.value.
-  nextTick(()=>{
+    })
-    // let data = appContainer.value.
+    setTimeout(() => {
+      loading.value = false
+    }, 500)
   })
-  setTimeout(() => {
-    loading.value = false
-  }, 500)
-})
 </script>
 
 <style scoped>
-.edit-input {
+  .edit-input {
-  padding-right: 100px;
+    padding-right: 100px;
-}
+  }
-.app-container{
+  .app-container {
-  flex: 1;
+    flex: 1;
-  display: flex;
+    display: flex;
-  width: 100%;
+    width: 100%;
-  padding: 16px;
+    padding: 16px;
-  box-sizing: border-box;
+    box-sizing: border-box;
-}
+  }
-.cancel-btn {
+  .cancel-btn {
-  position: absolute;
+    position: absolute;
-  right: 15px;
+    right: 15px;
-  top: 10px;
+    top: 10px;
-}
+  }
 </style>