天道酬勤,学无止境

vue +element 的Table封装公共组件

element ui 的Table封装公共组件!

由于在做项目的时候,很多表格都是一样的格式,我们每次引入这样很浪费空间,将代码量上涨,不如将表格进行封装成一个公共的组件,便于我们随时随刻的调用。

table封装一这是一个简单演示

在这里去调用组件

这是引用

对于表格操作的event对象

这是关于表格的一些操作

这是关于表格两项配置colums 和 operation(根据需求,有操作可配置,无操作给operation:[])

在这里插入图片描述

下面是封装的公共table组件

<template>
  <div class="table-container">
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="tableHeaderColor"
      border
    >
      <el-table-column
        type="selection"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        type="index"
        align="center"
        label="序号"
        :width="numWidth"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(item, index) in columns"
        :key="index"
        :sortable="item.sort"
        :prop="item.attrName"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div class="table-item-group">
            <!-- 用户状态 -->
            <span
              v-if="item.isType === 'status'"
              :class="[
                scope.row[item.attrName] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
            ></span>
            <!-- bug状态 -->
            <span
              v-if="item.isType === 'bugstatus'"
              :class="[
                scope.row[item.attrName] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
            ></span>
            <!--  bug图片 -->
            <el-popover
              v-if="item.isBug === 'bug'"
              placement="left-end"
              trigger="hover"
            >
              <!--trigger属性值:hover、click、focus 和 manual-->
              <a
                :href="scope.row[item.attrName]"
                target="_blank"
                title="查看最大化图片"
              >
                <img
                  :src="scope.row[item.attrName]"
                  style="width: 300px; height: 300px"
                />
              </a>
              <img
                slot="reference"
                :src="scope.row[item.attrName]"
                style="width: 50px; height: 50px; cursor: pointer"
              />
            </el-popover>
            <span
              class="btn-type"
              v-else-if="item.eventType === 'toBug'"
              @click="operateType(item.eventType, scope.row)"
            >{{ checkType(item.isType, scope.row[item.attrName])}}</span>
            <span class="normal-text" v-else>{{
              checkType(item.isType, scope.row[item.attrName])
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="operation.length > 0"
        align="center"
        label="操作"
        :width="operationWidth"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              size="mini"
              v-for="(item, index) in operation"
              :key="index"
              :type="item.type"
              :icon="item.icon"
              :title="item.operateName"
              @click="operateType(item.opreatetype, scope.row, scope.$index)"
              circle
            ></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "commontable",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    operation: {
      type: Array,
      default: () => [],
    },

    operationWidth: {
      type: Number,
      default: () => 0,
    },
    numWidth: {
      type: Number,
      default: () => 0,
    },
  },
  data() {
    return {};
  },
  components: {},
  mounted() {},
  methods: {
    // 修改table header的背景色
    tableHeaderColor() {
      return "background-color: #F4F4F4;";
    },
    operateType(type, value, index) {
      this.$emit("operate", { type: type, value: value, index: index });
    },

    checkType(type, value) {
      let label = "";
      switch (type) {
        case "status": //状态:是否启用
          if (value == 1) {
            label = "启用";
          } else {
            label = "禁用";
          }
          break;
        case "bugstatus": //BUG 的状态
          if (value == 1) {
            label = "未关闭";
          } else {
            label = "关闭";
          }
          break;
        default:
          label = value;
      }
      return label;
    },
  },
};
</script>
	
<style scoped lang="scss">
.table-container {
  position: relative;
  width: 100%;
}

.btn-type {
  color: $title_color;
  cursor: pointer;
  &:hover {
    color: $auto_primary_color;
  }
}
.normal-text {
  color: $title_color;
}
.opreate-btn {
  cursor: pointer;
  color: $subtitle_color;
  font-size: 18px;
  margin-right: 10px;
  &:hover {
    opacity: 0.8;
  }
}
.status-dot-grean {
  background: #6dd400;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 5px;
}
.status-dot-red {
  background: #e02020;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 5px;
}
.table-item-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>


table封装二

采用插槽的方式将操作栏抽离

<v-Table
      :tableData="tableData"
      :title="columns"
      @operate="dataOperation"
      :gg="false"
    >
      <template slot="dealScreenshot" slot-scope="scope">
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </v-Table> 
  data(){
    return {
    columns: [
        {
          prop: 'name',
          label: '用户名',
        },
        {
          prop: 'roleId',
          label: '用户角色',
          eventType: 'type',
        },
        {
          prop: 'status',
          label: '用户状态',
          isType: 'status',
        },
        {
          prop: 'dealScreenshot', //要与上面预留的slot位置一致
          label: '操作',
          operate: true,
        },
      ],
    }

公共表格组件二

<template>
  <div>
    <!-- 中部列表表格 -->
    <el-table
      :data="tableData"
      :header-cell-style="tableHeaderColor"
      highlight-current-row
      border
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        v-if="gg ? true : false"
      ></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(itemtest, index) in title"
        :key="index"
        v-if="!itemtest.operate"
        :sortable="itemtest.sort"
        :prop="itemtest.attrName"
        :label="itemtest.label"
        :width="itemtest.width"
      >
        <template slot-scope="scope">
          <div class="table-item-group">
            <!-- 配置启用禁用的颜色 -->
            <i
              v-if="itemtest.isType === 'status'"
              :class="[
                scope.row[itemtest.prop] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
              class="el-icon-message-solid"
            ></i>
            <!-- 表格中具体的某一项点击事件 -->
            <span
              class="btn-type"
              v-if="itemtest.eventType"
              @click="operateType(itemtest.eventType, scope.row, scope.$index)"
              >{{ checkType(itemtest.isType, scope.row[itemtest.prop]) }}</span
            >
            <!-- 正常表格渲染数据 -->
            <span class="normal-text" v-else>{{
              checkType(itemtest.isType, scope.row[itemtest.prop])
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :label="itemtest.label"
        :width="itemtest.width"
        :prop="itemtest.prop"
        align="center"
      >
        <template slot-scope="scope">
          <slot
            :name="itemtest.prop"
            :$index="scope.$index"
            :row="scope.row"
          ></slot>
          <!-- 对应slot name -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tabletable',
  props: {
    title: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
    gg: Boolean,
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor() {
      return 'background-color: #F4F4F4;'
    },
    operateType(type, value, index) {
      this.$emit('operate', { type: type, value: value, index: index })
    },
    checkType(type, value) {
      let label = ''
      switch (type) {
        case 'teskType': //测试任务类型
          if (value === 1) {
            label = '功能测试'
          } else if (value === 2) {
            label = '性能测试'
          } else if (value === 3) {
            label = '稳定性测试'
          }
          break
        case 'status': //状态:是否启用
          if (value == 1) {
            label = '启用'
          } else {
            label = '禁用'
          }
          break
        default:
          label = value
      }
      return label
    },
  },
}
</script>

<style scoped lang="scss">
.normal-text {
  color: $title_color;
}
.btn-type {
  color: $title_color;
  cursor: pointer;
  &:hover {
    color: $auto_primary_color;
  }
}
.status-dot-grean {
  color: #6dd400;
}
.status-dot-red {
  color: #e02020;
}
.table-item-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>   

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 基于Element-ui组件的Pagination 前端分页与Java后端分页两种实现方式【最新版】
    大千世界,茫茫人海,相识就是一种缘分。若此篇文章对您有帮助,点个赞或点个关注呗! 前言 数据分页也是开发中经常遇到的需求之一。不管运用什么技术,分页无非就是前端分页或后端分页,也就是所谓的假分页与真分页。不过,按照常规来说,最好还是后端分页。假设有数万条数全部返回到前端,前端再进一步逻辑分页,可想而知响应到客户的视图界面需要多长时间。当数据量少的时候,前后端分页都一样,基本没什么区别;数据量过多,强烈建议后端分页。 ✍一、开发环境 前端: Vue 2.0 element-ui组件【版本2.13.0】Pagination 分页组件后端: SpringBoot2.0   插件PageHelper的jar包【1.2.3】 ✍二、话不多说,先预览效果图   1、这是最终实现的完整效果图,需要自定义其他的分页栏,可在elemet-ui组件中自己引入相关的代码即可;   2、element-ui组件目支持的分页样式,属性和方法这里不做赘述,可前往官网查看引用 ✍三、VUE纯前端的分页   前端分页机制: 首先查出对应接口的所有数据返回至前端;结合element组件的分页,获取选中的页码与页大小;利用slice()方法可从已有的数组中返回选定的元素:arrayObject.slice(start,end)。 代码示例: paging.vue(以table表格为例) <el-table
  • VUE常用插件库
    一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用vue-multiselect - Vue.js选择框解决方案VueCircleMenu - 漂亮的vue圆环菜单vue-chat - vuejs和vuex及webpack的聊天示例radon-ui - 快速开发产品的Vue组件库vue-waterfall - Vue.js的瀑布布局组件vue-carbon - 基于 vue 开发MD风格的移动端vue-beauty - 由vue和ant design创建的优美UI组件bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件vueAdmin - 基于vuejs2和element的简单的管理员模板vue-ztree - 用 vue 写的树层级组件vue-tree - vue树视图组件vue-tabs -
  • VUE常用插件库总结
    一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -
  • vue常用插件总结
    一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -
  • vue插件汇总
    一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -
  • Vue常用组件插件
    vue常用组件插件 UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式一致的响应式 UI 库 vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 eme- 优雅的Markdown编辑器 vue-multiselect- Vue.js选择框解决方案 vue-table- 简化数据表格 VueCircleMenu- 漂亮的vue圆环菜单 vue-chat- vuejs和vuex及webpack的聊天示例 radon-ui- 快速开发产品的Vue组件库 vue-waterfall- Vue.js的瀑布布局组件 vue-carbon- 基于 vue 开发MD风格的移动端 vue-beauty- 由vue和ant design创建的优美UI组件 vue-blu- 帮助你轻松创建web应用 vueAdmin- 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight- Sublime Text语法高亮
  • 前端用得上的框架组件,值得收藏!
    框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -
  • Vue开源库汇总
    UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库 mint-ui ★4776 - Vue 2的移动UI元素 iview ★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2363 - 轻量级的基本UI组件合集 vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★1992 - 三端样式一致的响应式 UI 库 vuetify ★1678 - 为移动而生的Vue JS 2组件框架 vonic ★1494 - 快速构建移动端单页应用 eme ★1390 - 优雅的Markdown编辑器 vue-multiselect ★1166 - Vue.js选择框解决方案 vue-table ★824 - 简化数据表格 VueCircleMenu ★776 - 漂亮的vue圆环菜单 vue-chat ★748 - vuejs和vuex及webpack的聊天示例 radon-ui ★633 - 快速开发产品的Vue组件库 vue-waterfall ★605 - Vue.js的瀑布布局组件 vue-carbon ★595 - 基于 vue 开发MD风格的 移动端 vue-beauty ★569 - 由vue和ant
  • Vue进阶(幺捌零):Vue优质开源项目汇总(持续更新中...)
    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上优质的Vue开源项目库,方便Vue开发人员便捷的找到自己需要的项目工具,感兴趣的可以到GitHub上给个star。 UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux ★6802 - 基于Vue和WeUI的组件库mint-ui ★4776 - Vue 2的移动UI元素iview ★4458 - 基于 Vuejs 的开源 UI 组件库Keen-UI ★2363 - 轻量级的基本UI组件合集vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用muse-ui ★1992 - 三端样式一致的响应式 UI 库vuetify ★1678 - 为移动而生的Vue JS 2组件框架vonic ★1494 - 快速构建移动端单页应用eme ★1390 - 优雅的Markdown编辑器vue-multiselect ★1166 - Vue.js选择框解决方案vue-table ★824 - 简化数据表格VueCircleMenu ★776 - 漂亮的vue圆环菜单vue-chat ★748 - vuejs和vuex及webpack的聊天示例radon-ui ★633 - 快速开发产品的Vue组件库vue-waterfall ★605 - Vue
  • VUE 3.0代码结构框架
    VUE结构框架 VUE脚手架目前采用VUE全家桶的基础套餐,然后各个项目在此 基础上可添加项目所需要的库和依赖,此脚手架的基础套餐为:VUE+ Element+Webpack+axios,VUE采用的是2.0版本。 其脚手架的结构如下: ├── public // 资源目录, 类似 static, 存储 lib ├── src // 系统业务相关代码 │ ├── common // 公共的代码、资源、工具 │ │ ├── assets // 多媒体资源存储位置,建议文件夹下再按模块划分,一般存放100K以内的图片,编译打包时候进行压缩 │ │ ├── constant // 一些常量定义, 都用大写字母,相关规范请参考我们的代码规范 │ │ ├── filter // Vue 过滤器, 可以参考 vue 的 filter │ │ ├── style // 全局样式相关处理 │ │ ├── icons // 需要变色处理的svg icon图片 │ │ └── utils // 通用的工具 js 方法 │ ├── components // 系统业务公共组件 │ │ ├── .vue // 组件内容写法 │ │ ├── .less // 组件要用到的样式, 在组件内import导入 │ │ └── .md // 每个公共组件必须有组件的介绍【用法、API、功能说明】 │ ├─”
  • luffy-02
    这里写目录标题 一.昨日回顾二.今日内容1 路飞前台配置(1)重构项目目录(2)文件修订:目录中非配置文件的多余文件可以移除router的使用 (3)前台配置①全局样式,配置文件②axios③vue-cookies④element-ui页面组件框架⑤bootstrap页面组件框架 2 user表配置user模块User表 3 封装全局response对象和全局异常封装项目异常处理二次封装Response模块 4.配置日志,记录日志封装loggerdev.pyutils/logging.py 日志的使用 5.跨域问题及解决django 使用django-cors-headers 解决跨域问题 6.前后端打通7.扩展 一.昨日回顾 1 软件开发规范 2 pip换源 -1.文件管理器文件路径地址栏敲: %APPDATA% 回车,快速进入C:\Users\电脑用户\AppData\Roaming 文件夹中 -2.新建pip文件夹并在文件夹中新建pip.ini配置文件 -3.新增pip.ini配置文件内容 3 虚拟环境(以后再写新项目,直接用虚拟环境,尽量一个项目一个虚拟环境) -1 配置 -windows下 -pip3 install virtualenv # 虚拟环境模块 -pip3 install virtualenvwrapper-win # workon命令
  • vue中下拉框组件的封装
    原理 vue element中,需要封装一个对应的下拉款组件。 第一步:在api_domain.js中添加后台的请求接口 //获取下拉框的接口 从redis中 domainGetDomainKeyRedis: params => { return axios.post('domain-manager/domain/getDomainKeyRedis',qs.stringify(params)); }, //获取下拉框的接口 从DB中 domainGetDomainKeyDB: params => { return axios.post('domain-manager/domain/getDomainKeyDB',qs.stringify(params)); }, 第二步,在文件夹api中新建getSelect.js,内容 /** * _this为传过来的this * * 根据参数str,去获取到对应的下拉框的值 * * paramName,接收的数组,如'type' * * 先去redis总查询,如果没有值,再去数据库中查询 */ import api from '@/api/api_domain' export function GetSelect(_this,str,paramName) { let para = { key: str }; if(typeof str ===
  • vue element 框架再次封装使用 一:tab表格封装(1)
    写代码从来都是 高级和低级之分,我就是那个低级的程序鸭,正在冲鸭进行中,不指望能有多牛B,不嗨的时候就本分的写,嗨的时候就多琢磨,多优化,说对编程有多热爱,自己都不信,就是为了钱一天天的出卖灵魂,苟且而生,就算是苟且也要苟且的舒服些,有意义些,so 不忙的时候优化一下后边可以生很多事,我写博客也不会为了方便别人,我没那么博爱,只是想着如果哪天换坑了,这些博客就是我曾经留下的印记 回归正题: 先看一看element 中的表格代码 这是用el-table标签渲染的 外层 :data上关联表头下对应的数据层, 每层有一个 el-table-colum 渲染每一个不同的表头 再次封装就是让表头以遍历的形式显示出来,这样就可以直接配置js文件就好了 贴图: data 中绑定list数据,在下面的遍历中遍历的是表头的集合,及表头的属性,利用v-if来配置type的类型,就可以展示不同类型的表头,比如选择框,或者序号,或者多级表头。。。。。。,还可以把element中任何需要的属性自定义加进来,加在每一项item上,在请求成功数据后直接赋值给tableData就可以了 具体代码就不帖了,复制element代码改改就行了,思路在这里,想做成组件标签引入就在vue组件中注册组件,prop中传值就可以了 来源:https://blog.csdn.net/jiuweiyaoy/article
  • vue -- -- --常用
    一、UI组件及框架   element - 饿了么出品的Vue2的web UI工具套件   mint-ui - Vue 2的移动UI元素   iview - 基于 Vuejs 的开源 UI 组件库   vux-ui -Vue.js 移动端 UI 组件库   Keen-UI - 轻量级的基本UI组件合集   vue-material - 通过Vue Material和Vue 2建立精美的app应用   muse-ui - 三端样式一致的响应式 UI 库   vuetify - 为移动而生的Vue JS 2组件框架   vonic - 快速构建移动端单页应用   vue-blu - 帮助你轻松创建web应用   vue-multiselect - Vue.js选择框解决方案   VueCircleMenu - 漂亮的vue圆环菜单   vue-chat - vuejs和vuex及webpack的聊天示例   radon-ui - 快速开发产品的Vue组件库   vue-waterfall - Vue.js的瀑布布局组件   vue-carbon - 基于 vue 开发MD风格的移动端   vue-beauty - 由vue和ant design创建的优美UI组件   bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件   vueAdmin -
  • 好用的vue组件插件及框架
    实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧! github上的vue汇总https://github.com/vuejs/awesome-vue#qr-code 一、UI组件及框架   element - 饿了么出品的Vue2的web UI工具套件   mint-ui - Vue 2的移动UI元素   iview - 基于 Vuejs 的开源 UI 组件库   vux-ui -Vue.js 移动端 UI 组件库   Keen-UI - 轻量级的基本UI组件合集   vue-material - 通过Vue Material和Vue 2建立精美的app应用   muse-ui - 三端样式一致的响应式 UI 库   vuetify - 为移动而生的Vue JS 2组件框架   vonic - 快速构建移动端单页应用   vue-blu - 帮助你轻松创建web应用   vue-multiselect - Vue.js选择框解决方案   VueCircleMenu - 漂亮的vue圆环菜单   vue-chat - vuejs和vuex及webpack的聊天示例
  • VUE常用UI组件插件及框架-vue前端UI框架收集
    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用vue-multiselect - Vue.js选择框解决方案VueCircleMenu - 漂亮的vue圆环菜单vue-chat - vuejs和vuex及webpack的聊天示例radon-ui - 快速开发产品的Vue组件库vue-waterfall - Vue.js的瀑布布局组件vue-carbon - 基于 vue 开发MD风格的移动端vue-beauty - 由vue和ant design创建的优美UI组件bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件vueAdmin - 基于vuejs2和element的简单的管理员模板vue-ztree - 用 vue 写的树层级组件vue-tree - vue树视图组件vue-tabs -
  • vue 购物 WebApp
    1 项目概述 1.1 简介   项目名 蘑菇购,与一般购物WebApp类似,包括首页、分类、购物车、个人中心、详情。   项目基于vue、vue-router、vue-cli3,api请求相关部分采用axios,数据部分并非来自服务器,而是本地基于express启动相关数据服务。原因一是网络接口更新快、数据变化大、依赖性高,二是项目本身不大,基于项目启动本机服务灵活性较高,代码安装依赖即可运行,故最终考虑express爬取相关接口数据保存本地。   状态管理未使用vuex,仅仅是少部分使用vuex功能显得多余,项目大才完全有必要。基于vue.observable能实现部分vuex功能。图片加载部分异步更新DOM采用事件总线进行组件通讯。   项目第三方开源组件包括better-scroll滚动插件、vue-awesome-swiper和swiper轮播组件、normalize.css初始化样式、vue-lazyload懒加载、移动端click300ms延时采用fastclick。   项目难度不高,适合新手练手,此篇仅是练习组件化封装和目录配置的相关记录。 1.2 预览地址   蘑菇购 1.3 示例图 1.4 文件目录配置 ├── public │ ├── favicon.ico │ ├── index.html ├── server │ ├── static │ │ ├─”
  • 路飞学城项目前台环境搭建、User表配置、封装项目异常处理、二次封装Response模块、封装logger及跨域请求
    文章目录 1、前台环境搭建1.1、vue环境1.2、创建项目1.3、重构项目目录1.4、文件修订:目录中非配置文件的多余文件可以移除1.4.1、App.vue1.4.2、router/index.js1.4.3、Home.vue 1.5、全局配置:全局样式、配置文件1.5.1、global.css1.5.2、settings.js1.5.3、main.js 1.6、axios前后台交互1.6.1、安装:前端项目目录下的终端1.6.2、配置:main.js 1.7、cookies操作1.7.1、安装:前端项目目录下的终端1.7.2、配置:main.js 1.8、element-ui页面组件框架1.8.1、安装:前端项目目录下的终端1.8.2、配置:main.js 1.9、bootstrap页面组件框架1.9.1、安装:前端项目目录下的终端1.9.2、配置jquery:vue.config.js1.9.3、配置bootstrap:main.js 2、User表配置2.1、创建user模块2.2、创建User表对应的model:user/models.py2.3、注册user模块,配置User表:dev.py2.4、配置media2.4.1、media配置:dev.py2.4.2、media目录配置2.4.3、主路由:luffyapi/urls.py2.4.4、子路由:user/urls
  • vue中面包屑的封装
    面包屑是一种常见的导航工具,通常出现在网页内容的上方。面包屑小巧,简单,网站面包屑作为一种辅助导航工具,作用是告诉访问者他们目前在网站中的位置以及如何返回,提高用户的体验。 面包屑的作用 作为一种辅助导航工具,面包屑为用户呈现出网页的结构层次,让用户知道自己目前所处的位置以及自己还能到哪里去。面包屑鼓励用户浏览更多的内容,提升了整个网站的可访问性,降低网站的跳出率。利于搜索引擎蜘蛛对网站的抓取,实现网页SEO优化。 面包屑的类型 基于位置的面包屑:基于位置的面包屑能很好的反映网站的结构特征,能将网站的层级结构展现在访客面前,对于通过外部链接或搜索引擎进入页面的游客具有清晰的指引性作用。 基于路径的面包屑:基于路径的面包屑即历史足迹,它所反映的不是网站的结构特征,而是游客的完整访问路径。此类面包屑动态生成,帮助游客记录浏览的历史足迹。 基于属性的面包屑:基于属性的面包屑常见于电子商务类网站。产品根据类别和属性的不同而归于不同的目录之中,基于属性的面包屑使用户更容易理解产品和产品之间的关系。 vue中面包屑的封装 下面借用element-ui和vue为大家简单实现一个面包屑的封装。 先创建一个bread.vue组件作为封装的公共组件使用element-ui中的面包屑做一个初始化结构 对el-breadcrumb不了解的可以来这里:element–面包屑 <el-breadcrumb
  • vue 给ant design table 组件自定义点击行(选中行)样式和斑马纹样式
    写在开头: element-ui的table组件有几个属性很好用,但是ant-design中table组件是没有的。 比如: stripe: 是否为斑马纹 table。 highlight-current-row: 是否要高亮当前行。 当然,还有好几个其他的属性,但是本文先只讲这两个。既然element-ui有,ant-design没有,那我在用ant-design的table组件时,想要实现这两个功能怎么办? 答案是凉拌。既然它没有,那就自己写,也就是二次封装。 ok,先来实现这个属性的功能:highlight-current-row。 highlight-current-row 首先,当然是给定义prop变量:highlightCurrentRow;再定义一个另外一个prop变量currentRow。 然后在watch中监听currentRow的变化,每次当currentRow变化的时候,渲染一下上一个选中行和当前选中行的样式。 currentRow (val) { if (this.highlightCurrentRow) { this.renderRowStyleAfterRowClick(val) } } highlightCurrentRow为true的时候,才需要渲染新的样式。 renderRowStyleAfterRowClick: // 选中某一行后