收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
861
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue-element-admin左边树形，右边格子的布局。vue element ui模板。树形tree 动态自适应屏幕高度

8020人阅读 2021/12/23 17:19 总访问：5231987 评论：0 收藏：0 手机
分类: 前端

效果如下：

代码如下：

  1. <template>
  2.   <div class="app-container student-archives">
  3.     <div style="display: flex">
  4.       <el-card class="box-card" style="width: 300px; margin-right: 10px">
  5.         <!--      <div slot="header" class="clearfix"><span>&nbsp;</span></div> -->
  6.         <el-scrollbar style="height: 640px">
  7.           <el-tree
  8.             ref="tree"
  9.             :data="treeData"
  10.             node-key="id"
  11.             :expand-on-click-node="false"
  12.             highlight-current
  13.             @node-click="nodeClick"
  14.           ></el-tree>
  15.         </el-scrollbar>
  16.       </el-card>
  17.       <el-card class="box-card" style="flex: 1">
  18.         <div class="clearfix">
  19.           <div style="flex: 1" />
  20.           <el-input placeholder="请输入档案" />
  21.           <el-button type="primary">搜索</el-button>
  22.         </div>
  23.         <el-row :gutter="20" style="margin-top: 10px">
  24.           <el-col
  25.             v-for="(item, index) in iconList"
  26.             :key="index"
  27.             :lg="3"
  28.             :md="3"
  29.             :sm="6"
  30.             :xl="3"
  31.             :xs="12"
  32.           >
  33.             <vab-card class="icon-panel" shadow="hover">
  34.               <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  35.               <p>我是档案</p>
  36.             </vab-card>
  37.           </el-col>
  38.           <!-- <vab-draggable
  39.             v-model="iconList"
  40.             v-bind="dragOptions"
  41.             item-key="icon"
  42.             style="position: relative; display: flex; flex-wrap: wrap"
  43.           >
  44.             <template #item="{ element: item }">
  45.               <el-col :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
  46.                 <vab-card class="icon-panel" shadow="hover">
  47.                   <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  48.                   <p>按住拖拽</p>
  49.                 </vab-card>
  50.               </el-col>
  51.             </template>
  52.           </vab-draggable> -->
  53.         </el-row>
  54.       </el-card>
  55.     </div>
  56.   </div>
  57. </template>
  59. <script>
  60. import { getIconList } from '@/api/remixIcon'
  61. export default {
  62.   // 组件名字
  63.   name: 'ArchivesManager',
  64.   data() {
  65.     return {
  66.       courseID: '',
  67.       labId: '',
  68.       iconList: [],
  69.       treeData: [
  70.         {
  71.           label: '人事档案',
  72.           children: [
  73.             {
  74.               label: '初始档案',
  75.               children: [
  76.                 {
  77.                   label: '2019',
  78.                 },
  79.                 {
  80.                   label: '2020',
  81.                 },
  82.                 {
  83.                   label: '2021',
  84.                 },
  85.               ],
  86.             },
  87.             {
  88.               label: '简化档案',
  89.               children: [
  90.                 {
  91.                   label: '简化一版',
  92.                 },
  93.                 {
  94.                   label: '简化二版',
  95.                 },
  96.                 {
  97.                   label: '简化三版',
  98.                 },
  99.               ],
  100.             },
  101.           ],
  102.         },
  103.         {
  104.           label: '合同档案',
  105.           children: [
  106.             {
  107.               label: '二级 2-1',
  108.               children: [
  109.                 {
  110.                   label: '三级 2-1-1',
  111.                 },
  112.               ],
  113.             },
  114.             {
  115.               label: '二级 2-2',
  116.               children: [
  117.                 {
  118.                   label: '三级 2-2-1',
  119.                 },
  120.               ],
  121.             },
  122.           ],
  123.         },
  124.         {
  125.           label: '会计档案',
  126.           children: [
  127.             {
  128.               label: '二级 3-1',
  129.               children: [
  130.                 {
  131.                   label: '三级 3-1-1',
  132.                 },
  133.               ],
  134.             },
  135.             {
  136.               label: '二级 3-2',
  137.               children: [
  138.                 {
  139.                   label: '三级 3-2-1',
  140.                 },
  141.               ],
  142.             },
  143.           ],
  144.         },
  145.       ],
  146.     }
  147.   },
  148.   mounted() {
  149.     this.initPic()
  150.   },
  151.   // 组件方法
  152.   methods: {
  153.     // randomHexColor() {
  154.     //   return _.shuffle([
  155.     //     '#1890FF',
  156.     //     '#36CBCB',
  157.     //     '#4ECB73',
  158.     //     '#FBD437',
  159.     //     '#F2637B',
  160.     //     '#975FE5',
  161.     //   ])
  162.     // },
  163.     randomHexColor() {
  164.       return '#1890FF'
  165.     },
  166.     dragOptions() {
  167.       return {
  168.         animation: 600,
  169.         group: 'description',
  170.         disabled: false,
  171.         ghostClass: 'ghost',
  172.       }
  173.     },
  174.     initPic() {
  175.       //测试数据
  176.       const list = [
  177.         '24-hours-fill',
  178.         '24-hours-line',
  179.         '4k-fill',
  180.         '4k-line',
  181.         'a-b',
  182.         'account-box-fill',
  183.         'account-box-line',
  184.         'account-circle-fill',
  185.         'account-circle-line',
  186.         'account-pin-box-fill',
  187.         'account-pin-box-line',
  188.         'account-pin-circle-fill',
  189.         'account-pin-circle-line',
  190.         'add-box-fill',
  191.         'add-box-line',
  192.       ]
  193.       let my = this
  195.       this.iconList = list
  196.         //.filter((icon) => icon.includes('-line'))
  197.         .map((icon, index) => {
  198.           return { icon, color: my.randomHexColor(), order: index + 1 }
  199.         })
  200.       console.log(this.iconList)
  201.     },
  202.   },
  203. }
  204. </script>
  206. <style scoped="scoped">
  207. .custom-tree-node {
  208.   display: flex;
  209.   flex: 1;
  210.   align-items: center;
  211.   justify-content: space-between;
  212.   padding-right: 8px;
  213.   font-size: 14px;
  214. }
  215. .el-input {
  216.   width: 200px;
  217.   margin-right: 10px;
  218. }
  219. .clearfix {
  220.   display: flex;
  221. }
  222. </style>
  223. <style lang="scss">
  224. .student-archives {
  225.   .el-scrollbar__wrap {
  226.     overflow-x: hidden;
  227.   }
  228.   .el-tree-node__content {
  229.     height: 40px;
  230.   }
  231. }
  233. .vab-app-main {
  234.   padding: 0px !important;
  235. }
  236. </style>

右边的宽度比例可以自己调，上面的效果是写的自适应的，看官网的element ui文档就知道了，element ui布局是分的24份，响应式布局有五个响应尺寸：xs、sm、md、lg 和 xl，我这里是适配的lg的3分，也就是3/24，也就是1/8，也就是一行占8份

  1. <el-col
  2.   v-for="(item, index) in iconList"
  3.   :key="index"
  4.   :lg="3"
  5.   :md="3"
  6.   :sm="6"
  7.   :xl="3"
  8.   :xs="12"
  9. >

如果我们不要自适应布局，就想保持一行放2块的话，一块就是占用24份的一半就是12份就行了，设置:span=”12”。el-row的gutter属性是用来设置间隔的，比如这里的:gutter=”20”就是两个块之间间隔20个像素

  1. <el-row :gutter="20" style="margin-top: 10px">
  2.   <el-col v-for="(item, index) in iconList" :key="index" :span="12">
  3.     <vab-card class="icon-panel" shadow="hover">
  4.       <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  5.       <p>我是档案</p>
  6.     </vab-card>
  7.   </el-col>
  8. </el-row>

官方的布局文档：https://element.eleme.io/#/zh-CN/component/layout

vue3中得写法

  1. <template>
  2.   <div class="app-container student-archives">
  3.     <div style="display: flex">
  4.       <el-card class="box-card" style="width: 300px; margin-right: 10px">
  5.         <!--      <div slot="header" class="clearfix"><span>&nbsp;</span></div> -->
  6.         <el-scrollbar style="height: 640px">
  7.           <el-tree
  8.             ref="tree"
  9.             :data="treeData"
  10.             node-key="id"
  11.             default-expand-all
  12.             :expand-on-click-node="false"
  13.             highlight-current
  14.             @node-click="nodeClick"
  15.           ></el-tree>
  16.         </el-scrollbar>
  17.       </el-card>
  18.       <el-card class="box-card" style="flex: 1">
  19.         <div class="clearfix">
  20.           <div style="flex: 1" />
  21.           <el-input placeholder="请输入档案" />
  22.           <el-button type="primary">搜索</el-button>
  23.         </div>
  24.         <el-row :gutter="20" style="margin-top: 10px">
  25.           <el-col
  26.             v-for="(item, index) in iconList"
  27.             :key="index"
  28.             :lg="12"
  29.             :md="12"
  30.             :xl="8"
  31.           >
  32.             <vab-card class="icon-panel" shadow="hover">
  33.               <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  34.               <p>我是档案</p>
  35.             </vab-card>
  36.           </el-col>
  37.           <!-- <vab-draggable
  38.             v-model="iconList"
  39.             v-bind="dragOptions"
  40.             item-key="icon"
  41.             style="position: relative; display: flex; flex-wrap: wrap"
  42.           >
  43.             <template #item="{ element: item }">
  44.               <el-col :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
  45.                 <vab-card class="icon-panel" shadow="hover">
  46.                   <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  47.                   <p>按住拖拽</p>
  48.                 </vab-card>
  49.               </el-col>
  50.             </template>
  51.           </vab-draggable> -->
  52.         </el-row>
  53.       </el-card>
  54.     </div>
  55.   </div>
  56. </template>
  58. <script>
  59. import { doEdit, getArchivesTypeGroup } from '@/api/archivesType'
  61. export default defineComponent({
  62.   name: 'ArchivesManager',
  63.   setup(props, { emit }) {
  64.     const $baseMessage = inject('$baseMessage')
  66.     const state = reactive({
  67.       iconList: [],
  68.       treeData: [
  69.         {
  70.           label: '人事档案',
  71.           children: [
  72.             {
  73.               label: '初始档案',
  74.               children: [
  75.                 {
  76.                   label: '2019',
  77.                 },
  78.                 {
  79.                   label: '2020',
  80.                 },
  81.                 {
  82.                   label: '2021',
  83.                 },
  84.               ],
  85.             },
  86.             {
  87.               label: '简化档案',
  88.               children: [
  89.                 {
  90.                   label: '简化一版',
  91.                 },
  92.                 {
  93.                   label: '简化二版',
  94.                 },
  95.                 {
  96.                   label: '简化三版',
  97.                 },
  98.               ],
  99.             },
  100.           ],
  101.         },
  102.         {
  103.           label: '合同档案',
  104.           children: [
  105.             {
  106.               label: '二级 2-1',
  107.               children: [
  108.                 {
  109.                   label: '三级 2-1-1',
  110.                 },
  111.               ],
  112.             },
  113.             {
  114.               label: '二级 2-2',
  115.               children: [
  116.                 {
  117.                   label: '三级 2-2-1',
  118.                 },
  119.               ],
  120.             },
  121.           ],
  122.         },
  123.         {
  124.           label: '会计档案',
  125.           children: [
  126.             {
  127.               label: '二级 3-1',
  128.               children: [
  129.                 {
  130.                   label: '三级 3-1-1',
  131.                 },
  132.               ],
  133.             },
  134.             {
  135.               label: '二级 3-2',
  136.               children: [
  137.                 {
  138.                   label: '三级 3-2-1',
  139.                 },
  140.               ],
  141.             },
  142.           ],
  143.         },
  144.       ],
  145.     })
  146.     const randomHexColor = async () => {
  147.       return '#1890FF'
  148.     }
  149.     const fetchData = async () => {
  150.       // const {
  151.       //   data: { list },
  152.       // } = await getArchivesTypeGroup()
  153.       // state.treeData = list
  154.     }
  155.     const getArchives = async () => {
  156.       //测试数据
  157.       const list = [
  158.         '24-hours-fill',
  159.         '24-hours-line',
  160.         '4k-fill',
  161.         '4k-line',
  162.         'a-b',
  163.         'account-box-fill',
  164.         'account-box-line',
  165.         'account-circle-fill',
  166.         'account-circle-line',
  167.         'account-pin-box-fill',
  168.         'account-pin-box-line',
  169.         'account-pin-circle-fill',
  170.         'account-pin-circle-line',
  171.         'add-box-fill',
  172.         'add-box-line',
  173.       ]
  174.       state.iconList = list
  175.         //.filter((icon) => icon.includes('-line'))
  176.         .map((icon, index) => {
  177.           return { icon, color: randomHexColor(), order: index + 1 }
  178.         })
  179.     }
  180.     onMounted(() => {
  181.       fetchData()
  182.       getArchives()
  183.     })
  184.     return {
  185.       ...toRefs(state),
  186.     }
  187.   },
  188. })
  189. </script>
  193. <style scoped="scoped">
  194. .custom-tree-node {
  195.   display: flex;
  196.   flex: 1;
  197.   align-items: center;
  198.   justify-content: space-between;
  199.   padding-right: 8px;
  200.   font-size: 14px;
  201. }
  202. .el-input {
  203.   width: 200px;
  204.   margin-right: 10px;
  205. }
  206. .clearfix {
  207.   display: flex;
  208. }
  209. </style>
  210. <style lang="scss">
  211. .student-archives {
  212.   .el-scrollbar__wrap {
  213.     overflow-x: hidden;
  214.   }
  215.   .el-tree-node__content {
  216.     height: 40px;
  217.   }
  218. }
  220. .vab-app-main {
  221.   padding: 0px !important;
  222. }
  223. </style>

vue3版本看这个，上面那个好像直接复制进去有点问题了

  1. <template>
  2.     <div class="course-module-settings-container student-archives">
  3.         <div style="display: flex">
  4.             <el-card class="box-card" style="width: 300px; margin-right: 10px">
  5.                 <el-scrollbar style="height: 640px">
  6.                     <el-tree ref="tree" :data="state.treeData" node-key="id" :expand-on-click-node="false" highlight-current></el-tree>
  7.                 </el-scrollbar>
  8.             </el-card>
  9.             <el-card class="box-card" style="flex: 1">
  10.                 <div class="clearfix">
  11.                     <div style="flex: 1" />
  12.                     <el-input placeholder="请输入档案" />
  13.                     <el-button type="primary">搜索</el-button>
  14.                 </div>
  15.                 <el-row :gutter="20" style="margin-top: 10px">
  16.                     <el-col v-for="(item, index) in state.iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
  17.                         <vab-card class="icon-panel" shadow="hover">
  18.                             <vab-icon :icon="item.icon" :style="{ color: item.color }" />
  19.                             <p>我是档案</p>
  20.                         </vab-card>
  21.                     </el-col>
  22.                 </el-row>
  23.             </el-card>
  24.         </div>
  25.     </div>
  26. </template>
  27. <script setup lang="ts" name="courseModuleSettings">
  28. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  29. const state = reactive({
  30.     title: '更新',
  31.     iconList: [],
  32.     treeData: [
  33.         {
  34.             label: '人事档案',
  35.             children: [
  36.                 {
  37.                     label: '初始档案',
  38.                     children: [
  39.                         {
  40.                             label: '2019',
  41.                         },
  42.                         {
  43.                             label: '2020',
  44.                         },
  45.                         {
  46.                             label: '2021',
  47.                         },
  48.                     ],
  49.                 },
  50.                 {
  51.                     label: '简化档案',
  52.                     children: [
  53.                         {
  54.                             label: '简化一版',
  55.                         },
  56.                         {
  57.                             label: '简化二版',
  58.                         },
  59.                         {
  60.                             label: '简化三版',
  61.                         },
  62.                     ],
  63.                 },
  64.             ],
  65.         },
  66.         {
  67.             label: '合同档案',
  68.             children: [
  69.                 {
  70.                     label: '二级 2-1',
  71.                     children: [
  72.                         {
  73.                             label: '三级 2-1-1',
  74.                         },
  75.                     ],
  76.                 },
  77.                 {
  78.                     label: '二级 2-2',
  79.                     children: [
  80.                         {
  81.                             label: '三级 2-2-1',
  82.                         },
  83.                     ],
  84.                 },
  85.             ],
  86.         },
  87.         {
  88.             label: '会计档案',
  89.             children: [
  90.                 {
  91.                     label: '二级 3-1',
  92.                     children: [
  93.                         {
  94.                             label: '三级 3-1-1',
  95.                         },
  96.                     ],
  97.                 },
  98.                 {
  99.                     label: '二级 3-2',
  100.                     children: [
  101.                         {
  102.                             label: '三级 3-2-1',
  103.                         },
  104.                     ],
  105.                 },
  106.             ],
  107.         },
  108.     ],
  109. });
  111. onMounted(() => {});
  112. </script>
  114. <style scoped="scoped" lang="scss">
  115. .course-module-settings-container {
  116.     padding: 15px;
  118.     .el-input {
  119.         width: 200px;
  120.         margin-right: 10px;
  121.     }
  122.     .clearfix {
  123.         display: flex;
  124.     }
  125. }
  126. </style>
  128. <style lang="scss">
  129. .student-archives {
  130.     .el-scrollbar__wrap {
  131.         overflow-x: hidden;
  132.     }
  133.     .el-tree-node__content {
  134.         height: 40px;
  135.     }
  136. }
  137. </style>

vue3版本加上了一点动态自适应屏幕高度的

  1. <template>
  2.     <div class="course-module-settings-container student-archives">
  3.         <div style="display: flex">
  4.             <el-card class="box-card" style="width: 300px; margin-right: 10px">
  5.                 <el-scrollbar :style="{height:state.contentHeight}">
  6.                     <el-tree ref="tree" :data="state.treeData" node-key="id" :expand-on-click-node="false" highlight-current></el-tree>
  7.                 </el-scrollbar>
  8.             </el-card>
  9.             <el-card class="box-card" style="flex: 1">
  10.                 <div class="clearfix">
  11.                     <div style="flex: 1" />
  12.                     <el-input placeholder="请输入档案" size="default" />
  13.                     <el-button type="primary" size="default">搜索</el-button>
  14.                 </div>
  15.                 <div>
  16.                     其他内容...
  17.                 </div>
  18.             </el-card>
  19.         </div>
  20.     </div>
  21. </template>
  22. <script setup lang="ts" name="courseModuleSettings">
  23. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  24. const state = reactive({
  25.     title: '更新',
  26.     iconList: [],
  27.     contentHeight:"150px",
  28.     treeData: [
  29.         {
  30.             label: '人事档案',
  31.             children: [
  32.                 {
  33.                     label: '初始档案',
  34.                     children: [
  35.                         {
  36.                             label: '2019',
  37.                         },
  38.                         {
  39.                             label: '2020',
  40.                         },
  41.                         {
  42.                             label: '2021',
  43.                         },
  44.                     ],
  45.                 },
  46.                 {
  47.                     label: '简化档案',
  48.                     children: [
  49.                         {
  50.                             label: '简化一版',
  51.                         },
  52.                         {
  53.                             label: '简化二版',
  54.                         },
  55.                         {
  56.                             label: '简化三版',
  57.                         },
  58.                     ],
  59.                 },
  60.             ],
  61.         },
  62.         {
  63.             label: '合同档案',
  64.             children: [
  65.                 {
  66.                     label: '二级 2-1',
  67.                     children: [
  68.                         {
  69.                             label: '三级 2-1-1',
  70.                         },
  71.                     ],
  72.                 },
  73.                 {
  74.                     label: '二级 2-2',
  75.                     children: [
  76.                         {
  77.                             label: '三级 2-2-1',
  78.                         },
  79.                     ],
  80.                 },
  81.             ],
  82.         },
  83.         {
  84.             label: '会计档案',
  85.             children: [
  86.                 {
  87.                     label: '二级 3-1',
  88.                     children: [
  89.                         {
  90.                             label: '三级 3-1-1',
  91.                         },
  92.                     ],
  93.                 },
  94.                 {
  95.                     label: '二级 3-2',
  96.                     children: [
  97.                         {
  98.                             label: '三级 3-2-1',
  99.                         },
  100.                     ],
  101.                 },
  102.             ],
  103.         },
  104.     ],
  105. });
  107. onMounted(() => {
  108.     autoHeight()
  109.     // 让f12全屏的时候或者退出全屏的时候可以让高度跟着自适应变化
  110.     window.addEventListener('resize', autoHeight);
  111. });
  114. const autoHeight = ()=>{
  115.     // 动态调整高度
  116.     state.contentHeight =  window.innerHeight-(53+15+85)+"px"
  117. }
  119. </script>
  121. <style scoped="scoped" lang="scss">
  122. .course-module-settings-container {
  123.     padding: 15px;
  125.     .el-input {
  126.         width: 200px;
  127.         margin-right: 10px;
  128.     }
  129.     .clearfix {
  130.         display: flex;
  131.     }
  132. }
  133. </style>

自适应高度的原理看这个：https://www.tnblog.net/aojiancc2/article/details/8490


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

解决vue-element-admin 安装依赖失败问题
安装依赖失败百度找了一下是因为git权限的问题执行下面命令就可以了git config --global url.&quot;https://&quot;.instead...

vue-element-admin表头样式。element table 设置表头颜色
在表格上增加:header-cell-style就行了&lt;el-table ref=&quot;multipleTable&quot; :data=&quot;tableData&quot; toolt...

vue-element-admin 常用表格与搜索栏界面搭配 。 element ui样式搭配。模板
界面大概的样子：代码（下方有vue3中的写法）：&lt;template&gt; &lt;divclass=&quot;app-container&quot;&gt; &lt;el-fo...

vue-element-admin左边树形，右边表格的布局。vue模板
大概的界面如下：代码：&lt;template&gt; &lt;divclass=&quot;app-container&quot;&gt; &lt;el-row:gutter=&quot;20&quot...

vue-element-admin api相关，api配置。vue-element-admin 统一配置api前缀
api请求的前缀是配置在env.xx文件里边env.development是本地环境，env.production这个文件配置的是正式环境这里可以看到默...

vue-element-admin 配置相关， 关闭页面上的设置等
设置在：src目录下的settings.js配置文件，showSettings设置成false即可关闭页面上的设置其他设置module.exports={ title:...

vue-element-admin 全局样式
全局样式是在src下面的styles文件夹里边有些是在src下面的assets里边要看情况

vue-element-admin 获取环境变量的值
环境变量的定义定义在.env.development里边表示开发环境定义在.env.production里边表示线上环境 比如定义两个 VUE_APP_BA...

vue-element-admin vscode 配置 ESLint自动修复代码，自动格式化代码
先找到eslint插件的扩展设置 然后找到settings.json中编辑,点击进去 然后把配置内容加进去：配置内容如下： // es...

element ui admin 如何点击按钮关闭当前菜单。vue-element-admin关闭当前标签页。编辑文章或者编写文章后返回上一页
核心代码如下： // 调用全局挂载的方法(vuex中封装的方法)，关闭当前页 this.$store.dispatch(&quot;tagsView/del...

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框，据输入，动态加载数据 jquery-editable-select
用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页，.net core分部页
.net分部页的三种方式第一种：@Html.Partial(&quot;_分部页&quot;)第二种：@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式，iis设置mime类型，iis配置支持的类型
webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...