feat: 🎸 新增Detail详情组件并给出相应示例

src/components/Detail/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="detail__wrap">
+    <div class="detail__wrap--header" @click="toggleClick">
+      <div class="detail__wrap--title">
+        <div v-if="title">
+          {{ title }}
+          <el-tooltip
+            v-if="message"
+            effect="dark"
+            :content="message"
+            placement="right"
+          >
+            <i class="el-icon-warning-outline" />
+          </el-tooltip>
+        </div>
+      </div>
+      <i v-if="collapsed" :class="['el-icon-arrow-down', { 'el-icon-arrow-down-transform': !show }]" />
+    </div>
+    <el-collapse-transition>
+      <div
+        v-show="show"
+        class="detail__content"
+        :style="contentStyleObj"
+      >
+        <el-row>
+          <el-col
+            v-for="(item, $index) in schema"
+            :key="$index"
+            :span="item.span || 12"
+          >
+            <div
+              class="detail__content--item"
+              :class="{'detail__content--flex': !vertical}"
+            >
+              <div class="content__item--label" :style="labelStyleObj">
+                <slot v-if="item.slots && item.slots.title" :name="item.slots.title" :row="item" />
+                <template v-else>{{ item.label }}</template>
+              </div>
+              <div class="content__item--message" :style="messageStyleObj">
+                <slot v-if="item.slots && item.slots.default" :name="item.slots.default" :row="item" />
+                <template v-else>{{ data[item.field] }}</template>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType, computed } from 'vue'
+export default defineComponent({
+  name: 'Detail',
+  props: {
+    // 详情标题
+    title: {
+      type: String as PropType<string>,
+      default: ''
+    },
+    // 是否可折叠
+    collapsed: {
+      type: Boolean as PropType<boolean>,
+      default: true
+    },
+    // 辅助提示
+    message: {
+      type: String as PropType<string>,
+      default: ''
+    },
+    // 是否需要边框
+    border: {
+      type: Boolean as PropType<boolean>,
+      default: true
+    },
+    // 需要展示的数据
+    data: {
+      type: Object as PropType<object>,
+      required: true
+    },
+    // 布局展示的数据
+    schema: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    // 是否标题和内容各占一行 垂直布局
+    vertical: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    },
+    // 标题宽度
+    labelWidth: {
+      type: String as PropType<string>,
+      default: '150px'
+    },
+    // 标题位置
+    labelAlign: {
+      type: String as PropType<string>,
+      default: 'left'
+    },
+    // 边框颜色
+    borderColor: {
+      type: String as PropType<string>,
+      default: '#f0f0f0'
+    },
+    // 标题背景颜色
+    labelBg: {
+      type: String as PropType<string>,
+      default: '#fafafa'
+    }
+  },
+  setup(props) {
+    const show = ref<boolean>(true)
+
+    const contentStyleObj = computed(() => {
+      return {
+        borderTop: props.border ? `1px solid ${props.borderColor}` : '',
+        borderLeft: props.border ? `1px solid ${props.borderColor}` : ''
+      }
+    })
+
+    const labelStyleObj = computed(() => {
+      return {
+        width: props.vertical ? `calc(100% - 33px)` : props.labelWidth,
+        textAlign: props.labelAlign,
+        backgroundColor: props.border ? props.labelBg : '',
+        borderRight: props.border ? `1px solid ${props.borderColor}` : '',
+        borderBottom: props.border ? `1px solid ${props.borderColor}` : ''
+      }
+    })
+
+    const messageStyleObj = computed(() => {
+      return {
+        width: props.vertical ? `calc(100% - 33px)` : '100%',
+        borderRight: props.border ? `1px solid ${props.borderColor}` : '',
+        borderBottom: props.border ? `1px solid ${props.borderColor}` : ''
+      }
+    })
+
+    function toggleClick() {
+      if (props.collapsed) {
+        show.value = !show.value
+      }
+    }
+
+    return {
+      show,
+      contentStyleObj, labelStyleObj, messageStyleObj,
+      toggleClick
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.detail__wrap {
+  background: #fff;
+  border-radius: 2px;
+  padding: 10px;
+  .detail__wrap--header {
+    display: flex;
+    height: 32px;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    .detail__wrap--title {
+      display: inline-block;
+      font-size: 18px;
+      font-weight: 700;
+      color: rgba(0, 0, 0, .85);
+      position: relative;
+      margin-left: 10px;
+      &:after {
+        content: "";
+        width: 3px;
+        height: 100%;
+        background: #2d8cf0;
+        border-radius: 2px;
+        position: absolute;
+        top: 1px;
+        left: -10px;
+      }
+    }
+    .el-icon-arrow-down {
+      transition: all .2s;
+    }
+    .el-icon-arrow-down-transform {
+      transform: rotate(-180deg);
+    }
+  }
+  .detail__content {
+    .detail__content--flex {
+      display: flex;
+      height: 100%;
+    }
+    .content__item--label {
+      padding: 8px 16px;
+    }
+    .content__item--message {
+      flex: 1;
+      padding: 8px 16px;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/components/More/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="more__item clearfix">
-    <p class="more__item--text">{{ content }}</p>
+  <div class="more__item clearfix" :style="styleWrapObj">
+    <p class="more__item--text" :style="styleTextObj">{{ content }}</p>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, unref, onMounted, nextTick, ref } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 export default defineComponent({
   name: 'More',
   props: {
@@ -17,47 +17,51 @@ export default defineComponent({
     // 默认展示几行
     lineClamp: {
       type: Number as PropType<number>,
-      default: 0
-    },
-    // 宽度
-    width: {
-      type: String as PropType<string>,
-      default: '300px'
+      default: 1
     },
     // style
     style: {
       type: Object as PropType<object>,
-      default: () => {
-        return {
-          width: '300px',
-          float: 'left'
-        }
-      }
+      default: () => null
     }
   },
   setup(props) {
-    const styleObj = computed(() => {
+    const styleWrapObj = computed(() => {
+      return props.style
+    })
 
+    const styleTextObj = computed(() => {
+      if (props.lineClamp === 1) {
+        // 默认展示一行
+        return {
+          'white-space': 'nowrap'
+        }
+      } else {
+        // 展示多少行
+        return {
+          display: '-webkit-box',
+          '-webkit-line-clamp': props.lineClamp,
+          '-webkit-box-orient': 'vertical'
+        }
+      }
     })
+
+    return {
+      styleWrapObj,
+      styleTextObj
+    }
   }
 })
 </script>
 
 <style lang="less" scoped>
 .more__item {
-  width: 528px;
-  height: 122px;
   float: left;
   .more__item--text {
-    width: 476px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
     font-size: 14px;
     color: #545c63;
-    line-height: 28px;
     transition: all .1s;
     text-align: left;
     &:hover {
@@ -67,10 +71,11 @@ export default defineComponent({
       z-index: 5;
       border-radius: 8px;
       box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);
-      -webkit-line-clamp: inherit;
-       padding: 10px;
+      -webkit-line-clamp: inherit !important;
+      padding: 10px;
       margin-top: -10px;
       margin-left: -10px;
+      white-space: normal !important;
     }
   }
 }

src/components/Setting/index.vue

@@ -77,6 +77,11 @@
         <el-switch v-model="logo" @change="setLogo" />
       </div>
 
+      <div class="setting__item">
+        <span>灰色模式</span>
+        <el-switch v-model="greyMode" @change="setGreyMode" />
+      </div>
+
       <div class="setting__item">
         <span>页面标题</span>
         <el-input v-model="title" size="mini" @change="setTitle" />
@@ -86,6 +91,7 @@
         <span>LOGO标题</span>
         <el-input v-model="logoTitle" size="mini" @change="setLogoTitle" />
       </div>
+
     </div>
   </el-drawer>
 </template>
@@ -158,6 +164,11 @@ export default defineComponent({
       appStore.SetLogoTitle(logoTitle)
     }
 
+    const greyMode = ref<boolean>(appStore.greyMode)
+    function setGreyMode(greyMode: boolean) {
+      appStore.SetGreyMode(greyMode)
+    }
+
     return {
       drawer, toggleClick,
       layout, setLayout,
@@ -170,7 +181,8 @@ export default defineComponent({
       tagsView, setTagsView,
       logo, setLogo,
       title, setTitle,
-      logoTitle, setLogoTitle
+      logoTitle, setLogoTitle,
+      greyMode, setGreyMode
     }
   }
 })
@@ -199,7 +211,7 @@ export default defineComponent({
 // 项目配置
 .setting__content {
   background: @appBg;
-  padding: 0 20px;
+  padding: 0 20px 20px 20px;
   .setting__title {
     text-align: center;
     padding-top: 20px;

src/components/Table/components/TableColumn.vue

@@ -4,16 +4,16 @@
       <!-- 树型数据 -->
       <template v-if="item.children && item.children.length">
         <table-column
-          :key="item[item.key]"
+          :key="item[item.field]"
           :child="item"
         />
       </template>
 
       <template v-else>
         <el-table-column
-          :key="item[item.key]"
+          :key="item[item.field]"
           v-bind="{...getItemBindValue(item)}"
-          :prop="item.key"
+          :prop="item.field"
         >
           <!-- 表头插槽 -->
           <template v-if="item.slots && item.slots.header" #header="scope">
@@ -37,7 +37,7 @@
 
           <!-- 不需要插槽 -->
           <!-- <span v-if="!item.slots || !item.slots.default">
-            {{ scope.row[item.key] }}
+            {{ scope.row[item.field] }}
           </span> -->
         </el-table-column>
       </template>

src/components/Table/index.vue

@@ -12,7 +12,7 @@
         <!-- 自定义索引 -->
         <template v-if="item.type === 'index'">
           <el-table-column
-            :key="item[item.key]"
+            :key="item[item.field]"
             v-bind="{...getItemBindValue(item)}"
             type="index"
             :index="item.index"
@@ -22,16 +22,16 @@
         <!-- 树型数据 -->
         <template v-else-if="item.children && item.children.length">
           <table-column
-            :key="item[item.key]"
+            :key="item[item.field]"
             :child="item"
           />
         </template>
 
         <template v-else>
           <el-table-column
-            :key="item[item.key]"
+            :key="item[item.field]"
             v-bind="{...getItemBindValue(item)}"
-            :prop="item.key"
+            :prop="item.field"
           >
             <!-- 表头插槽 -->
             <template v-if="item.slots && item.slots.header" #header="scope">
@@ -55,7 +55,7 @@
             </template>
             <!-- 不需要插槽 -->
             <!-- <span v-if="!item.slots || !item.slots.default">
-              {{ scope.row[item.key] }}
+              {{ scope.row[item.field] }}
             </span> -->
           </el-table-column>
         </template>

src/components/TagsView/index.vue

@@ -297,7 +297,7 @@ export default defineComponent({
       font-size: 12px;
       margin-left: 5px;
       &:last-of-type {
-        margin-right: 23px;
+        margin-right: 10px;
       }
       &.active {
         background-color: @tagActiveBg;

src/components/index.ts

@@ -2,9 +2,11 @@ import type { App } from 'vue'
 import Dialog from './Dialog/index.vue'// Dialog组件
 import ComTable from './Table/index.vue'// Table组件
 import ComSearch from './Search/index.vue'// Search组件
+import ComDetail from './Detail/index.vue'// Detail组件
 
 export function setupGlobCom(app: App<Element>): void {
   app.component('ComDialog', Dialog)
   app.component('ComTable', ComTable)
   app.component('ComSearch', ComSearch)
+  app.component('ComDetail', ComDetail)
 }

src/pages/index/App.vue

@@ -1,11 +1,18 @@
 <template>
-  <router-view class="app" />
+  <router-view class="app" :class="{'grey__mode': greyMode}" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { appStore } from '_p/index/store/modules/app'
 export default defineComponent({
-  name: 'App'
+  name: 'App',
+  setup() {
+    const greyMode = computed(() => appStore.greyMode)
+    return {
+      greyMode
+    }
+  }
 })
 </script>
 
@@ -24,4 +31,12 @@ html,body {
   .size;
   background: @appBg;
 }
+.grey__mode {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+}
 </style>

src/pages/index/router/index.ts

@@ -188,6 +188,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '显示更多'
         }
+      },
+      {
+        path: 'detail',
+        component: () => import('_p/index/views/components-demo/detail/index.vue'),
+        name: 'DetailDemo',
+        meta: {
+          title: '详情组件'
+        }
       }
     ]
   },

src/pages/index/store/modules/app.ts

@@ -15,6 +15,7 @@ export interface AppState {
   title: String
   logoTitle: String
   userInfo: String
+  greyMode: Boolean
 }
 
 @Module({ dynamic: true, namespaced: true, store, name: 'app' })
@@ -32,6 +33,7 @@ class App extends VuexModule implements AppState {
   public title = 'vue-element-plus-admin' // 标题
   public logoTitle = 'vue-ElPlus-admin' // logo标题
   public userInfo = 'userInfo' // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
+  public greyMode = false // 是否开始灰色模式，用于特殊悼念日
 
   @Mutation
   private SET_COLLAPSED(collapsed: boolean): void {
@@ -81,6 +83,10 @@ class App extends VuexModule implements AppState {
   private SET_LOGOTITLE(logoTitle: string): void {
     this.logoTitle = logoTitle
   }
+  @Mutation
+  private SET_GREYMODE(greyMode: boolean): void {
+    this.greyMode = greyMode
+  }
 
   @Action
   public SetCollapsed(collapsed: boolean): void {
@@ -130,6 +136,10 @@ class App extends VuexModule implements AppState {
   public SetLogoTitle(logoTitle: string): void {
     this.SET_LOGOTITLE(logoTitle)
   }
+  @Action
+  public SetGreyMode(greyMode: boolean): void {
+    this.SET_GREYMODE(greyMode)
+  }
 }
 
 export const appStore = getModule<App>(App)

src/pages/index/views/components-demo/detail/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="详情组件。"
+      type="info"
+      style="margin-bottom: 20px;"
+    />
+
+    <com-detail
+      :data="data"
+      :schema="schema"
+      title="基础示例"
+      message="辅助文字"
+    />
+
+    <com-detail
+      title="不可折叠"
+      :data="data"
+      :schema="schema"
+      :collapsed="false"
+      message="辅助文字"
+      style="margin-top: 20px;"
+    />
+
+    <com-detail
+      title="没有辅助文字"
+      :data="data"
+      :schema="schema"
+      style="margin-top: 20px;"
+    />
+
+    <com-detail
+      title="没有边框"
+      :data="data"
+      :schema="schema"
+      :border="false"
+      style="margin-top: 20px;"
+    />
+
+    <com-detail
+      title="垂直布局"
+      :data="data"
+      :vertical="true"
+      :schema="schema"
+      style="margin-top: 20px;"
+    />
+
+    <el-form
+      ref="formRef"
+      :hide-required-asterisk="true"
+      :model="form"
+      :rules="rules"
+      style="margin-top: 20px;"
+    >
+      <com-detail
+        title="与表单结合并自定义插槽"
+        :data="form"
+        :schema="fromSchema"
+      >
+        <template #title="scope">
+          <span class="is-required-item">{{ scope.row.label }}</span>
+        </template>
+        <template #titleDefault>
+          <el-form-item prop="title">
+            <el-input v-model="form.title" placeholder="请输入标题" />
+          </el-form-item>
+        </template>
+
+        <template #author="scope">
+          <span class="is-required-item">{{ scope.row.label }}</span>
+        </template>
+        <template #authorDefault>
+          <el-form-item prop="author">
+            <el-input v-model="form.author" placeholder="请输入作者" />
+          </el-form-item>
+        </template>
+
+        <template #time="scope">
+          <span class="is-required-item">{{ scope.row.label }}</span>
+        </template>
+        <template #timeDefault>
+          <el-form-item prop="display_time">
+            <el-date-picker
+              v-model="form.display_time"
+              type="datetime"
+              placeholder="请选择创建时间"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </template>
+
+        <template #importance="scope">
+          <span class="is-required-item">{{ scope.row.label }}</span>
+        </template>
+        <template #importanceDefault>
+          <el-form-item prop="importance">
+            <el-select v-model="form.importance" placeholder="请选择重要性" style="width: 100%;">
+              <el-option label="重要" value="3" />
+              <el-option label="良好" value="2" />
+              <el-option label="一般" value="1" />
+            </el-select>
+          </el-form-item>
+        </template>
+
+        <template #pageviews="scope">
+          <span class="is-required-item">{{ scope.row.label }}</span>
+        </template>
+        <template #pageviewsDefault>
+          <el-form-item prop="pageviews">
+            <el-input-number
+              v-model="form.pageviews"
+              :min="0"
+              :max="99999999"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </template>
+      </com-detail>
+      <div style="margin-top: 15px;text-align: center;">
+        <el-button type="primary" @click="saveData">保存(控制台查看数据)</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, unref } from 'vue'
+import { InfoWriteParams, InfoWriteRules } from './types'
+
+const data: any = {
+  username: 'chenkl',
+  nickName: '梦似花落。',
+  age: 26,
+  phone: '13655971xxxx',
+  email: '502431556@qq.com',
+  addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
+  sex: '男',
+  certy: '35058319940712xxxx'
+}
+const schema: any[] = [
+  {
+    field: 'username',
+    label: '用户名'
+  },
+  {
+    field: 'nickName',
+    label: '昵称'
+  },
+  {
+    field: 'phone',
+    label: '联系电话'
+  },
+  {
+    field: 'email',
+    label: '邮箱'
+  },
+  {
+    field: 'addr',
+    label: '地址',
+    span: 24
+  }
+]
+
+const requiredRule = {
+  required: true,
+  message: '该项为必填项'
+}
+
+const fromSchema: any[] = [
+  {
+    field: 'title',
+    label: '标题',
+    span: 24,
+    slots: {
+      title: 'title',
+      default: 'titleDefault'
+    }
+  },
+  {
+    field: 'author',
+    label: '作者',
+    slots: {
+      title: 'author',
+      default: 'authorDefault'
+    }
+  },
+  {
+    field: 'display_time',
+    label: '创建时间',
+    slots: {
+      title: 'time',
+      default: 'timeDefault'
+    }
+  },
+  {
+    field: 'importance',
+    label: '重要性',
+    slots: {
+      title: 'importance',
+      default: 'importanceDefault'
+    }
+  },
+  {
+    field: 'pageviews',
+    label: '阅读数',
+    slots: {
+      title: 'pageviews',
+      default: 'pageviewsDefault'
+    }
+  }
+]
+
+export default defineComponent({
+  // name: 'DetailDemo',
+  setup() {
+    const formRef = ref<HTMLElement | null>(null)
+
+    const form = reactive<InfoWriteParams>({
+      id: '', // id
+      author: '', // 作者
+      title: '', // 标题
+      importance: '', // 重要性
+      display_time: '', // 创建时间
+      pageviews: 0 // 阅读数
+    })
+
+    const rules = reactive<InfoWriteRules>({
+      title: [requiredRule],
+      author: [requiredRule],
+      importance: [requiredRule],
+      display_time: [requiredRule],
+      pageviews: [requiredRule]
+    })
+
+    function saveData() {
+      const formRefWrap = unref(formRef as any)
+      try {
+        formRefWrap.validate(async(valid: boolean) => {
+          if (valid) {
+            const formData = unref(form)
+            console.log(formData)
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      } catch (err) {
+        console.log(err)
+      }
+    }
+
+    return {
+      data, schema,
+      formRef, form, fromSchema, rules, saveData
+    }
+  }
+})
+</script>
+
+<style>
+</style>

src/pages/index/views/components-demo/detail/types.ts

@@ -0,0 +1,16 @@
+export interface InfoWriteParams {
+  title: string
+  id?: string
+  author: string
+  importance: string
+  display_time: string
+  pageviews: number
+}
+
+export interface InfoWriteRules {
+  title?: any[]
+  author?: any[]
+  importance?: any[]
+  display_time?: any[]
+  pageviews?: any[]
+}

src/pages/index/views/example-demo/example-dialog/index.vue

@@ -78,31 +78,31 @@ const searchData = [
 
 const columns = [
   {
-    key: 'title',
+    field: 'title',
     label: '标题',
     showOverflowTooltip: true
   },
   {
-    key: 'author',
+    field: 'author',
     label: '作者'
   },
   {
-    key: 'display_time',
+    field: 'display_time',
     label: '创建时间'
   },
   {
-    key: 'importance',
+    field: 'importance',
     label: '重要性',
     slots: {
       default: 'importance'
     }
   },
   {
-    key: 'pageviews',
+    field: 'pageviews',
     label: '阅读数'
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '150px',
     slots: {

src/pages/index/views/example-demo/example-page/index.vue

@@ -74,31 +74,31 @@ const searchData = [
 
 const columns = [
   {
-    key: 'title',
+    field: 'title',
     label: '标题',
     showOverflowTooltip: true
   },
   {
-    key: 'author',
+    field: 'author',
     label: '作者'
   },
   {
-    key: 'display_time',
+    field: 'display_time',
     label: '创建时间'
   },
   {
-    key: 'importance',
+    field: 'importance',
     label: '重要性',
     slots: {
       default: 'importance'
     }
   },
   {
-    key: 'pageviews',
+    field: 'pageviews',
     label: '阅读数'
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '150px',
     slots: {

src/pages/index/views/login/index.vue

@@ -96,11 +96,11 @@ export default defineComponent({
       passWord: [{ required: true, message: '请输入密码' }]
     })
     async function login(): Promise<void> {
-      const form = unref(loginForm) as any
-      if (!form) return
+      const formWrap = unref(loginForm) as any
+      if (!formWrap) return
       loading.value = true
       try {
-        form.validate((valid: boolean) => {
+        formWrap.validate((valid: boolean) => {
           if (valid) {
             permissionStore.GenerateRoutes().then(() => {
               permissionStore.addRouters.forEach(async(route: RouteRecordRaw) => {

src/pages/index/views/table-demo/basic-table/index.vue

@@ -16,15 +16,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/border-table/index.vue

@@ -21,15 +21,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/custom-header/index.vue

@@ -39,15 +39,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'action',
+    field: 'action',
     slots: {
       header: 'actionHeader',
       default: 'action'

src/pages/index/views/table-demo/custom-index/index.vue

@@ -48,22 +48,22 @@ export default defineComponent({
 
     const columns = ref<any[]>([
       {
-        key: 'index',
+        field: 'index',
         type: 'index',
         index: (index: number) => {
           return index * 2
         }
       },
       {
-        key: 'date',
+        field: 'date',
         label: '日期'
       },
       {
-        key: 'name',
+        field: 'name',
         label: '姓名'
       },
       {
-        key: 'address',
+        field: 'address',
         label: '地址'
       }
     ])

src/pages/index/views/table-demo/expand-row/index.vue

@@ -47,22 +47,22 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'id',
+    field: 'id',
     type: 'expand',
     slots: {
       default: 'id'
     }
   },
   {
-    key: 'id',
+    field: 'id',
     label: '商品ID'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '商品名称'
   },
   {
-    key: 'desc',
+    field: 'desc',
     label: '描述'
   }
 ]

src/pages/index/views/table-demo/fixed-column-header/index.vue

@@ -28,38 +28,38 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     fixed: true,
     width: '150'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名',
     width: '120'
   },
   {
-    key: 'province',
+    field: 'province',
     label: '省份',
     width: '120'
   },
   {
-    key: 'city',
+    field: 'city',
     label: '市区',
     width: '120'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址',
     width: '300'
   },
   {
-    key: 'zip',
+    field: 'zip',
     label: '邮编',
     width: '120'
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '100',
     fixed: 'right',

src/pages/index/views/table-demo/fixed-column/index.vue

@@ -27,38 +27,38 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     fixed: true,
     width: '150'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名',
     width: '120'
   },
   {
-    key: 'province',
+    field: 'province',
     label: '省份',
     width: '120'
   },
   {
-    key: 'city',
+    field: 'city',
     label: '市区',
     width: '120'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址',
     width: '300'
   },
   {
-    key: 'zip',
+    field: 'zip',
     label: '邮编',
     width: '120'
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '100',
     fixed: 'right',

src/pages/index/views/table-demo/fixed-header/index.vue

@@ -22,15 +22,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/fluid-height/index.vue

@@ -27,38 +27,38 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     fixed: true,
     width: '150'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名',
     width: '120'
   },
   {
-    key: 'province',
+    field: 'province',
     label: '省份',
     width: '120'
   },
   {
-    key: 'city',
+    field: 'city',
     label: '市区',
     width: '120'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址',
     width: '300'
   },
   {
-    key: 'zip',
+    field: 'zip',
     label: '邮编',
     width: '120'
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '100',
     fixed: 'right',

src/pages/index/views/table-demo/merge-table/index.vue

@@ -31,25 +31,25 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'id',
+    field: 'id',
     label: 'ID'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'amount1',
+    field: 'amount1',
     label: '数值1',
     sortable: true
   },
   {
-    key: 'amount2',
+    field: 'amount2',
     label: '数值2',
     sortable: true
   },
   {
-    key: 'amount3',
+    field: 'amount3',
     label: '数值4',
     sortable: true
   }
@@ -57,23 +57,23 @@ const columns = [
 
 const columns1 = [
   {
-    key: 'id',
+    field: 'id',
     label: 'ID'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'amount1',
+    field: 'amount1',
     label: '数值1（元）'
   },
   {
-    key: 'amount2',
+    field: 'amount2',
     label: '数值2（元）'
   },
   {
-    key: 'amount3',
+    field: 'amount3',
     label: '数值4（元）'
   }
 ]

src/pages/index/views/table-demo/multi-header/index.vue

@@ -27,7 +27,7 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     fixed: true,
     width: '150'
@@ -36,7 +36,7 @@ const columns = [
     label: '配送信息',
     children: [
       {
-        key: 'name',
+        field: 'name',
         label: '姓名',
         width: '120'
       },
@@ -44,24 +44,24 @@ const columns = [
         label: '地址',
         children: [
           {
-            key: 'province',
+            field: 'province',
             label: '省份',
             width: '120'
           },
           {
-            key: 'city',
+            field: 'city',
             label: '市区',
             width: '120'
           },
           {
-            key: 'address',
+            field: 'address',
             label: '地址',
             slots: {
               default: 'address'
             }
           },
           {
-            key: 'zip',
+            field: 'zip',
             label: '邮编',
             width: '120'
           }
@@ -70,7 +70,7 @@ const columns = [
     ]
   },
   {
-    key: 'action',
+    field: 'action',
     label: '操作',
     width: '100',
     slots: {

src/pages/index/views/table-demo/multiple-choice/index.vue

@@ -28,15 +28,15 @@ import { defineComponent, ref, unref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/page-table/index.vue

@@ -26,15 +26,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/screen-table/index.vue

@@ -12,7 +12,7 @@
     <com-table
       ref="filterTable"
       v-loading="loading"
-      row-key="date"
+      row-field="date"
       :columns="columns"
       :data="tableData"
       :default-sort="{prop: 'date', order: 'descending'}"
@@ -66,25 +66,25 @@ export default defineComponent({
 
     const columns = ref<any[]>([
       {
-        key: 'date',
+        field: 'date',
         label: '日期',
         sortable: true,
         width: '180',
-        columnKey: 'date',
+        columnfield: 'date',
         filters: [{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }],
         filterMethod: filterHandler
       },
       {
-        key: 'name',
+        field: 'name',
         label: '姓名',
         sortable: true
       },
       {
-        key: 'address',
+        field: 'address',
         label: '地址'
       },
       {
-        key: 'tag',
+        field: 'tag',
         label: '标签',
         filters: [{ text: '家', value: '家' }, { text: '公司', value: '公司' }],
         filterMethod: filterTag,

src/pages/index/views/table-demo/single-choice/index.vue

@@ -28,15 +28,15 @@ import { defineComponent, ref, unref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/sort-table/index.vue

@@ -22,17 +22,17 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     sortable: true
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名',
     sortable: true
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/state-table/index.vue

@@ -21,15 +21,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/stripe-table/index.vue

@@ -21,15 +21,15 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/pages/index/views/table-demo/test/table.vue

@@ -1,20 +1,20 @@
 <template>
   <a-table :data-source="data" :columns="columns">
-    <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+    <template #filterDropdown="{ setSelectedfields, selectedfields, confirm, clearFilters, column }">
       <div style="padding: 8px">
         <a-input
           :ref="c => (searchInput = c)"
           :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
+          :value="selectedfields[0]"
           style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          @change="e => setSelectedfields(e.target.value ? [e.target.value] : [])"
+          @pressEnter="handleSearch(selectedfields, confirm, column.dataIndex)"
         />
         <el-button
           type="primary"
           size="small"
           style="width: 90px; margin-right: 8px"
-          @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          @click="handleSearch(selectedfields, confirm, column.dataIndex)"
         >
           <template #icon><SearchOutlined /></template>
           Search
@@ -51,25 +51,25 @@
 import { SearchOutlined } from '@ant-design/icons-vue';
 const data = [
   {
-    key: '1',
+    field: '1',
     name: 'John Brown',
     age: 32,
     address: 'New York No. 1 Lake Park',
   },
   {
-    key: '2',
+    field: '2',
     name: 'Joe Black',
     age: 42,
     address: 'London No. 1 Lake Park',
   },
   {
-    key: '3',
+    field: '3',
     name: 'Jim Green',
     age: 32,
     address: 'Sidney No. 1 Lake Park',
   },
   {
-    key: '4',
+    field: '4',
     name: 'Jim Red',
     age: 32,
     address: 'London No. 2 Lake Park',
@@ -90,7 +90,7 @@ export default {
         {
           title: 'Name',
           dataIndex: 'name',
-          key: 'name',
+          field: 'name',
           slots: {
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon',
@@ -113,7 +113,7 @@ export default {
         {
           title: 'Age',
           dataIndex: 'age',
-          key: 'age',
+          field: 'age',
           slots: {
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon',
@@ -135,7 +135,7 @@ export default {
         {
           title: 'Address',
           dataIndex: 'address',
-          key: 'address',
+          field: 'address',
           slots: {
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon',
@@ -158,10 +158,10 @@ export default {
     };
   },
   methods: {
-    handleSearch(selectedKeys, confirm, dataIndex) {
+    handleSearch(selectedfields, confirm, dataIndex) {
       confirm();
-      console.log(selectedKeys[0]);
-      this.searchText = selectedKeys[0];
+      console.log(selectedfields[0]);
+      this.searchText = selectedfields[0];
       this.searchedColumn = dataIndex;
       this.$forceUpdate();
     },

src/pages/index/views/table-demo/test/table2.tsx

@@ -4,38 +4,38 @@ import { defineComponent } from 'vue'
 const columns = [
   {
     dataIndex: 'name',
-    key: 'name',
+    field: 'name',
     // slots: { title: 'customTitle', customRender: 'name' }
   },
   {
     title: 'Age',
     dataIndex: 'age',
-    key: 'age'
+    field: 'age'
   },
   {
     title: 'Address',
     dataIndex: 'address',
-    key: 'address'
+    field: 'address'
   }
 ]
 
 const data = [
   {
-    key: '1',
+    field: '1',
     name: 'John Brown',
     age: 32,
     address: 'New York No. 1 Lake Park',
     tags: ['nice', 'developer']
   },
   {
-    key: '2',
+    field: '2',
     name: 'Jim Green',
     age: 42,
     address: 'London No. 1 Lake Park',
     tags: ['loser']
   },
   {
-    key: '3',
+    field: '3',
     name: 'Joe Black',
     age: 32,
     address: 'Sidney No. 1 Lake Park',

src/pages/index/views/table-demo/total-table/index.vue

@@ -33,25 +33,25 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'id',
+    field: 'id',
     label: 'ID'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'amount1',
+    field: 'amount1',
     label: '数值1',
     sortable: true
   },
   {
-    key: 'amount2',
+    field: 'amount2',
     label: '数值2',
     sortable: true
   },
   {
-    key: 'amount3',
+    field: 'amount3',
     label: '数值4',
     sortable: true
   }
@@ -59,23 +59,23 @@ const columns = [
 
 const columns1 = [
   {
-    key: 'id',
+    field: 'id',
     label: 'ID'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'amount1',
+    field: 'amount1',
     label: '数值1（元）'
   },
   {
-    key: 'amount2',
+    field: 'amount2',
     label: '数值2（元）'
   },
   {
-    key: 'amount3',
+    field: 'amount3',
     label: '数值4（元）'
   }
 ]

src/pages/index/views/table-demo/tree-and-load/index.vue

@@ -11,7 +11,7 @@
       v-loading="loading"
       :columns="columns"
       :data="tableData"
-      row-key="id"
+      row-field="id"
       border
       default-expand-all
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -21,7 +21,7 @@
       v-loading="loading"
       :columns="columns1"
       :data="tableData1"
-      row-key="id"
+      row-field="id"
       border
       lazy
       :load="load"
@@ -36,32 +36,32 @@ import { defineComponent, ref } from 'vue'
 
 const columns = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期',
     sortable: true
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名',
     sortable: true
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]
 
 const columns1 = [
   {
-    key: 'date',
+    field: 'date',
     label: '日期'
   },
   {
-    key: 'name',
+    field: 'name',
     label: '姓名'
   },
   {
-    key: 'address',
+    field: 'address',
     label: '地址'
   }
 ]

src/styles/glob.less

@@ -1,3 +1,4 @@
+// 悬停样式
 .hover-effect {
   cursor: pointer;
   transition: background .3s;
@@ -5,6 +6,16 @@
     background: rgba(0, 0, 0, .025);
   }
 }
+// 悬停样式
+
+// 必填样式
+.is-required-item::before {
+  content: "*";
+  color: #F56C6C;
+  margin-right: 4px;
+}
+// 必填样式
+
 
 // 综合实例样式
 .search__example--wrap {