精华内容
下载资源
问答
  • Vue 表格

    基于Vue 表格行上下移动

    在日常开发工作中常常会用到Vue.js,在比较旧的系统中也能很快的介入其中,在一些特效上也能通过vue简单快速的实现

    直接开撸,用Vue实现表格中行的动态上移下移。
    html代码:

    <div id="app" class="demo">
      <table class="table table-striped">
        <thead>
          <th>id</th>
          <th>value</th>
          <th>向上</th>
          <th>向下</th>
        </thead>
        <tbody is="transition-group" name="flip-list">
          <tr v-for="(item,index) in items" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.value}}</td>
            <td><button :disabled="index==0" @click="topItem(index)">向上</button></td>
            <td><button :disabled="index==items.length-1" @click="bottomItem(index)">向下</button></td>
          </tr>
        </tbody>
      </table>
    </div>
    

    css 代码(来点好看的样式):

    .flip-list-move {
      transition: transform 1s;
    }
    
    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }
    
    #app {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      transition: all 0.2s;
    }
    

    js代码:

    new Vue({
      el: '#app',
      data: {
        items: [{
          id: 1,
          value: 'text1'
        }, {
          id: 2,
          value: 'text2'
        }, {
          id: 3,
          value: 'text3'
        }, {
          id: 4,
          value: 'text4'
        }]
      },
      methods: {
        topItem: function(index) {
          [this.items[index], this.items[index - 1]] = [this.items[index - 1], this.items[index]]
          this.items.sort()
        },
        bottomItem: function(index) {
          [this.items[index], this.items[index + 1]] = [this.items[index + 1], this.items[index]]
          this.items.sort()
        },
      }
    })
    

    最后效果:
    在这里插入图片描述
    上述代码我的JSRUN地址:

    http://jsrun.net/LzWKp/edit

    展开全文
  • vue表格插件

    2020-06-15 02:01:17
    一个全功能的 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容,官方文档 2.SpreadJS 纯前端表格控件 ,全面支持Vue 官方 3.vue-easytable 基于 vue2.x 的table组件 官方文档 4.vuetable-2 (使用...

    1.vxe-table
    一个全功能的 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容,官方文档

    2.SpreadJS 纯前端表格控件 ,全面支持Vue 官方

    3.vue-easytable 基于 vue2.x 的table组件 官方文档

    4.vuetable-2 (使用Vue 2.x) github地址 中文网

    5.umy-ui(Vue 2.0) 流畅渲染表格万级数据 官网

    展开全文
  • vue表格组件 VUE表组件 (vue-table-component) A simple Vue component to display tables. Support sortable columns, pagination and custom css styles. 一个简单的Vue组件来显示表格。 支持可排序的列,分页和...

    vue表格组件

    VUE表组件 (vue-table-component)

    A simple Vue component to display tables. Support sortable columns, pagination and custom css styles.

    一个简单的Vue组件来显示表格。 支持可排序的列,分页和自定义CSS样式。

    Example with 2 Table components, first one with default styles and paginator, and second one with custom css styles and paginator in 'select' mode.

    具有2个表组件的示例,第一个具有默认样式和分页器,第二个具有自定义css样式和分页器(在“选择”模式下)。

    vue-table-component

    用法 (Usage)

    <TableView
        :headers="[
          {"label":"First Name", "field":"first_name", "sortable":true, "type":"String"},
          {"label":"Email", "field":"email", "sortable":true, "type":"String"},
          {"label":"Age", "field":"age", "sortable":true, "type":"Number"}
        ]",
        :rows="[
          {"first_name":"Isidor" ,"email":"[email protected]", "age":20},
          {"first_name":"Max", "email":"[email protected]", "age":32},
          {"first_name":"Brigham", "email":"[email protected]", "age":54},
          {"first_name":"Jakob", "email":"[email protected]", "age":37},
          {"first_name":"Brannon" ,"email":"[email protected]", "age":18}
        ]",      
        :sort="{
          field: 'first_name',
          order: 'asc'
        }",
        :pagination="{
          itemsPerPage: 10,
          align: 'center',
          visualStyle: 'select'
        }",
        css-style="my-css-style"
      >
        <template v-slot:items="{ row }">
          <td>{{ row.first_name }}</td>  
          <td>{{ row.email }}</td>              
          <td>{{ row.age }}</td>            
        </template>
        <template v-slot:no-data>
          <span>No data</span>
        </template>
      </TableView>
    

    道具 (Props)

    • headers: (required) array with table columns definition (See columns definition)

      headers :(必需)具有表列定义的数组(请参阅列定义)

    • rows: (required) array with data to fill the table

      rows :(必填)包含数据的数组,用于填充表

    • sort: object with sorting configuration

      sort :具有排序配置的对象

      • field: initial sort fieldfield :初始排序字段
      • order: [asc/desc] sort orderorder :[asc / desc]排序顺序
    • pagination: object with pagination configuration

      pagination :具有分页配置的对象

      • enabled: [true/false]已启用 :[true / false]
      • itemsPerPage: number of rows in each pageitemsPerPage :每页中的行数
      • align: [left/center/right] position of the paginator (Default 'right')align :分页器的[left / center / right]位置(默认为'right')
      • visualStyle: [select/button] paginator style (Default 'button')visualStyle :[选择/按钮]分页器样式(默认为“按钮”)
    • css-style: css class that will be applied to the component instead of default styles. Custom styles must be defined in this way:

      css-style :将应用于组件而不是默认样式的css类。 自定义样式必须以这种方式定义:

    <style lang="scss">
    .my-css-style{
        .ozn-table {
            ...
        }
        .ozn-paginator {
            ...
        }
    }
    </style>

    列定义 (Columns definition)

    Each column must be defined with 4 parameters:

    每列必须使用4个参数定义:

    • label: text that will be shown in the column header

      label :将在列标题中显示的文本

    • field: data field related to the column

      field :与列相关的数据字段

    • sortable: [true/false]

      可排序 :[是/否]

    • type: [String/Number]

      类型 :[字符串/数字]

    翻译自: https://vuejsexamples.com/a-simple-vue-component-to-display-tables/

    vue表格组件

    展开全文
  • ag-grid-vue表格

    2020-11-05 17:03:08
    ag-grid-vue表格问题总结1 ag-grid-vue表格问题总结2 注: ag-grid表格官网(英文版) ag-grid表格官网(中文版)
    1. ag-grid-vue表格问题总结1
    2. ag-grid-vue表格问题总结2
      注:
      ag-grid表格官网(英文版)__ag-grid表格官网(中文版)

    给表格添加操作栏:
    在这里插入图片描述
    (1)加操作栏需要在字段定义的时候写如下代码:

    <ag-grid-client
      :columnDefs="columnDefs"
      :context="context"
      :data="data"
      :frameworkComponents="frameworkComponents"
      :suppressRowClickSelection="true"
      ref="grid"
    ></ag-grid-client>
    ......    
    import childMessageRenderer from './action-message-renderer.js'
    
    [
        ......
    	{
    	     headerName: this.$t('schema.device.action'),
    	     field: '',
    	     width: 110,
    	     pinned: 'right',
    	     cellRenderer: 'childMessageRenderer'
    	}
    	......
    ]
    ......
    frameworkComponents: {
       childMessageRenderer: childMessageRenderer
    },
    context: { componentParent: this },
    

    (2)操作栏模板构造器:

    /*
     * FilePath: \xxx\action-message-renderer.js
     * Project:xxx
     * CreatedAt: xxx
     * CreatedBy: 666
     * Copyright: (c) 2020
     * Task: #1
     * 操作按钮模板构造器
     */
    
    import Vue from 'vue'
    import i18n from '@/i18n'
    
    export default Vue.extend({
      template: `
        <span>
          <v-tooltip bottom v-if="isIntegrated && (assetType === 'Firewall' || assetType === 'SafeGateKeeper' || assetType === 'HostProtection' || assetType === 'Plc')">
            <template v-slot:activator="{ on }">
              <v-btn
                color="primary"
                icon
                v-on="on"
                @click="policyConfig"
              >
                <v-icon>settings</v-icon>
              </v-btn>
            </template>
            <span>${i18n.t('schema.device.policyConfig')}</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn
                color="primary"
                icon
                v-on="on"
                @click="deviceInfo"
              >
                <v-icon>info</v-icon>
              </v-btn>
            </template>
            <span>${i18n.t('schema.device.deviceInfo')}</span>
          </v-tooltip>
          </span>
      `,
      data() {
        return {
          isIntegrated: false,
          assetType: ''
        }
      },
      beforeMount() { },
      mounted() {
        this.isIntegrated = this.params.data.asset.isIntegrated
        this.assetType = this.params.data.asset.assetType
      },
      methods: {
        policyConfig() {
          this.params.context.componentParent.policy(this.assetType, this.params.data.asset)
        },
        deviceInfo() {
          this.params.context.componentParent.details(this.params.data)
        }
      }
    })
    
    
    展开全文
  • 今天小编就为大家分享一篇解决vue 表格table列求和的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 开源Vue表格组件,表格插件源码

    千次阅读 2019-10-05 13:42:46
    开源Vue表格组件,表格插件源码 前言: 关于html里面原生的table,通常满足不了程序员的要求。所以开发了一款表格插件,其功 能有: 1 导入json格式数据后,自动填充表格。表格长宽自适应、排版优美。 2 提供分页...
  • vue 表格时间格式化Tables are the most complex elements in HTML, and table formatting is among the most complex parts of CSS. CSS defines a number of objects that are involved in table formatting, as ...
  • vue 表格分页 v选择 (v-selectpage) A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports. 一个强大的Vue2选择器,分页...
  • Ant Design of Vue 表格嵌套子表格表格的显示与隐藏 在开发过程中一定会遇到一对多的开发关系 最常见的就是表格嵌套 效果如下 表格嵌套 有一个重要属性expandedRowKeys 属性 和一个重要事件 expand 事件 首先 ...
  • ant design vue 表格可伸缩 表格的表头可伸缩,这个基础的功能,官网居然是通过引用其他插件来实现,而且官网的例子也是一言难尽,完全照搬就是报错,那就自己做处理吧。 新建一个vue文件,vueDraggableResizeble....
  • Ant Design Vue 表格行内编辑!!!

    千次阅读 热门讨论 2019-12-18 17:22:19
    Ant Design Vue 表格行内编辑,功能非常全面!
  • ant design vue表格编辑

    2020-08-11 14:59:26
    ant design vue表格编辑 columns里 {title: '操作', dataIndex: 'action', fixed: 'right', align: 'center', width: 120, scopedSlots: { customRender: 'action' } } template里 <div slot="action" slot-...
  • vue表格内容过长处理

    千次阅读 2019-07-22 16:15:15
    今天说一下vue表格的内容过长的处理。 vue表格内容过长 起初我想的是用原生的js给样式处理下就好了,可是审查元素发现element.style{}.在文件中并没有找到定义的此样式 。我在界面加调试代码element.style{white-...
  • vue表格自动滚动

    2021-01-08 10:36:16
    npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden...
  • vue表格向上滚动1.开发环境 vue.js+element+ts2.电脑系统 windows 10 专业版3.在开发的过程中,我们经常会做一些表格向上滚动的效果!本次是自己总结的方法,希望对你有所帮助。3-1: 使用的插件:datav轮播表使用事例,...
  • GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。 实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 ...
  • 依赖:vue+bootstrapVue 表格的全选和全部选以及部分选中切换功能。 组件代码: <template> <div style="width: 90%;margin: 10px auto;"> <b-table :items="items" :fields="fields" caption-top&...
  • @Vue表格内容替换成图形 Vue +element UI将表格内容替换成对应的图形 效果图如下: 用蓝色圆圈表示在线,灰色圆圈表示离线,绿色圆圈表示运行,黄色表示关闭。 实现方法 html部分: 通过对后台获取到的device数据...
  • vue表格编辑实例

    2018-06-15 13:40:05
    这是一个基于vue2.0的表格编辑实例,下载下来在浏览器打开,可以看到效果,编辑器打开可以看到源码,源码清晰明了
  • 小编主要做的都是后台管理系统,采用布局多为头部、左侧菜单栏,右侧内容,头部和菜单栏固定位置,内容部分如果很长就会出现滚动条(iview和element都提供了布局容器),后台管理系统多为表格的增删改查,so,要需要...
  • vue表格展开行显示图表 Vue Chartkick (Vue Chartkick) Create beautiful JavaScript charts with one line of Vue. 用一行Vue创建漂亮JavaScript图表。 View demo 查看演示 Download Source 下载源 图表 ...
  • vue表格修改.rar

    2020-03-10 22:22:51
    在开发中遇到表格开发问题,vue中element组件中表格的添加和修改功能,此代码只是其中一个方法。
  • ag-grid-vue表格的一些问题总结 1.表头居中和表格内容居中 找了很多资料也没有找到 在style标签中输入下面代码,就会居中。 /deep/ .ag-theme-balham [class^='ag-'], .ag-theme-balham [class^='ag-']:focus, .ag-...
  • Vue 常用的表格组件(持续更新) element-ui https://element.eleme.cn/2.9/#/zh-CN/component/table 表格组件 iview https://iviewui.com/components/table 表格组件 vxe-table ...
  • 题目描述是一个后台管理页面,用建了个多页表格,在换页时,序号先刷新,之后内容才刷新。。代码如下:<el-table :data="getList" :row-class-name="tableRowClassName" header-row-class-name="header-class" ...
  • vue表格排序按钮+后台逻辑处理 新手小白 Java方向刚毕业 接触vue不多 但是作为一个程序员,前台端工作分离 人是不分离的 都得自己写。 在表格el-table-column中插入属性 :sort-table=“costom”,因为是后台,这是...
  • vue表格组件

    2018-08-14 18:55:10
    GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。 API 该文档为GridManager的文档,除了columnData中存在差异...带搜索的表格...
  • vue表格静态

    千次阅读 2019-07-16 21:03:34
    vue+element的静态表格,可直接复用更改为自己想要的样式。 1)界面如下: 2)代码如下: <template> <div class="scene-container"> <el-card class="card1"> <el-form :inline=...
  • vue表格增删改查

    2019-03-04 09:10:52
    该文件主要以vue.js为主的表格渲染,数据交互。充分的表现了表格的增删改查功能,以及vue中input的使用,date日期的选择。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,610
精华内容 4,244
关键字:

vue表格

vue 订阅