精华内容
下载资源
问答
  • 使用vue渲染表格隔行变色

    千次阅读 2020-02-23 20:25:37
    使用vue框架,渲染一个表格。 要求: 1.表格隔行变色。 2 并能够通过下拉菜单选择颜色

    使用vue框架,渲染一个表格。

    最近刚开始学习vue框架,想用简单代码实现一个表格的渲染,不得不说,vue框架确实很强大,接触上了就会爱不释手。

    具体要求:

    1. 表格数据要隔行变色。
    2. 可以通过下拉菜单选取颜色。
    3. 给表格添加鼠标滑过效果。

    下面来看主要代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格隔行变色</title>
    		<script type="text/javascript" src="../vue.js"></script>
    		<style type="text/css">
    			*{
    				padding:0;
    				margin:0;
    			}
    			#box{
    				width:650px;
    				height:260px;
    				border:1px solid blue;
    				border-radius:5px;
    				padding:30px 10px 10px 10px;
    				margin-left:20px;
    				text-align:center;
    			}
    			#cont{
    				width:170px;
    				font-size:16px;
    			}
    			#tab{
    				margin:0 auto;
    				margin-top:30px;
    				}
    			p{
    				text-align:center;
    				padding:5px;
    			}
    			span{
    				display:inline-block;
    				width:5px;
    			}
    			td{
    				width:100px;
    				text-align:center;
    				font-size:16px;
    			}
    			.skyblue{
    				background: skyblue;
    			}
    			.yellow{
    				background: yellow;
    			}
    			.blue{
    				background: blue;
    			}
    			.pink{
    				background: pink;
    			}
    			.darkblue{
    				background: darkblue;
    			}
    			.gray{
    				background: gray;
    			}
    		</style>
    	</head>
    

    上面这是表格的一些样式修饰,简单设置了单元格宽度和表格颜色的样式。

    <body>
    		<div id="box">
    			<p>表格隔行变色</p>
    			<select id='cont' @change='foo(initColor)' v-model="initColor">
    				<option v-for='(item,index) in list' :value='index'>{{item.color1}}&&{{item.color2}}</option>
    			</select>
    			<table border="" cellspacing="" cellpadding="" id='tab'>
    				<tr v-for='i in num' :class='i%2==0?color.color2:color.color1'>
    					<td v-for='j in num' :style="{opacity:Tditem==j&&Tritem==i?0.3:1}" @mouseover="change(i,j)" @mouseout="removechange(i,j)">{{j}}</td>
    				</tr>
    			</table>
    		</div>
    		<script type="text/javascript">
    			var tab = new Vue({
    				el:'#box',
    				data:{
    					num:6,
    					Tritem:0,
    					Tditem:0,
    					initColor:0,
    					color:{color1:'skyblue',color2:'yellow'},
    					list:[
    					{color1:'skyblue',color2:'yellow'},{color1:'yellow',color2:'blue'},
    					{color1:'pink',color2:'darkblue'},{color1:'gray',color2:'pink'},
    					{color1:'skyblue',color2:'darkblue'}
    					]
    				},
    				methods:{
    					foo(item){
    						this.color.color1=this.list[item].color1;
    						this.color.color2=this.list[item].color2;
    					},
    					change(i,j){
    						this.Tditem = j;
    						this.Tritem = i;
    					},
    					removechange(i,j){
    						this.Tditem = 0;
    						this.Tritem = 0;
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    上面这是主要代码部分,具体思路是:

    1. 先实例化一个vue变量tab,在data中我定义了一个num为6,表示制作一个6x6的数据表格,在tr中使用v-for指令遍历num,得到6行,对于每一行在td中使用v-for指令遍历num,得到6列,就得到了6x6的数据表格了。
    2. 写下拉菜单,在data中写list属性,我用的是数组里面套对象的方法,写了5组颜色。select标签添加option标签,给该标签添加一个value属性,值为当前索引,在option标签内使用v-for指令遍历list,将颜色数据显示在下拉菜单中,下拉菜单就写好了。
    3. 在data中写一个color属性,值为list数组的第一项,color属性用来表示初始化显示的颜色。将tr的样式与color属性进行一个绑定,接下来主要通过改变color属性的值就能实现改变tr行的颜色了。在tr标签中添加:class=‘i%2==0?color.color2:color.color1’,这里用的是三元表达式,其中i表示当前tr所在行的索引,如果是偶数,显示color属性的color2的值,否则显示color属性的color1的值。
    4. 既然tr的颜色已经与color属性绑定,那么接下来就要通过下拉菜单来改变color属性的值就可以了。在data中定义一个initColor属性,值为0,默认显示下拉菜单第一行的颜色,在select标签使用v-model="initColor"与initColor双向绑定,@change='foo(initColor)'为定义的方法,每当下拉菜单改变时触发,在tab实例中的methods属性中写foo方法,改变color属性的两个值。这样通过下拉菜单改变颜色功能就写好了。
    5. 给表格添加鼠标滑过样式,在data中定义Tritem和Tditem两个属性,属性值分别表示当前鼠标所在表格的行和列,初始值为0,在td中添加鼠标划入事件@mouseover=“change(i,j)”,将该td的行和列作为参数传递,在methods中写change方法,然后改变data中的Triten和Tditem值就行了,最后给td添加样式:style="{opacity:Tditem== j && Tritem== i?0.3:1}",我在这里改变的是表格的透明度,当Tritem和Tditem的值为当前td的i和j时,说明选中,然后降低不透明度。鼠标移出事件@mouseout="removechange(i,j)"是将Tritem和Tditem改为0。

    下面来看看运行结果:

    默认显示第一项的颜色。
    运行结果
    通过下拉菜单选择其他颜色。
    换颜色
    鼠标滑过第二行第一列改变其不透明度。
    改变不透明度
    这样一个表格的简单渲染就完成啦!

    展开全文
  • ant design vue渲染表格显示no data

    千次阅读 2019-12-10 16:19:31
    按照ant design vue给出例子写表格组件,有表格数据,却渲染不出来,在分析这一问题,发现几个需要注意的点,做一记录 一般开发环境,当出现问题时,都会给出警告信息,所以留意控制台的输出 开发环境script...

    按照ant design vue给出例子写表格组件,有表格数据,却渲染不出来,在分析这一问题,发现几个需要注意的点,做一记录

    • 一般开发环境,当出现问题时,都会给出警告信息,所以留意控制台的输出

    • 开发环境script引入vue注意引入方式如下,否则不能看到警告信息;需引入vue.js,而不是vue.min.js

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    • 当表格作为组件时,表格数据属性不能用dataSource,而应该用data-source;否则不能正确渲染数据

    <a-table :columns="columns" :data-source="data">
    </a-table>
    • 最后对于html中引入ant design vue给出一个demo如下

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.2/dist/antd.css">
    </head>
        <div id="app">
          <a-table :columns="columns" :data-source="data">
              <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
              <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
              <span slot="tags" slot-scope="tags">
              <a-tag
                  v-for="tag in tags"
                  :color="tag==='loser' ? 'volcano' : (tag.length > 5 ? 'geekblue' : 'green')"
                  :key="tag"
              >
                  {{tag.toUpperCase()}}
              </a-tag>
              </span>
              <span slot="action" slot-scope="text, record">
              <a href="javascript:;">Invite 一 {{record.name}}</a>
              <a-divider type="vertical" />
              <a href="javascript:;">Delete</a>
              <a-divider type="vertical" />
              <a href="javascript:;" class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
              </span>
          </a-table>
        </div>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://momentjs.com/downloads/moment.js"></script>
        <script src="https://unpkg.com/ant-design-vue@1.4.2/dist/antd.js"></script>
        <script>
            var columns = [
                {
                dataIndex: 'name',
                key: 'name',
                slots: { title: 'customTitle' },
                scopedSlots: { customRender: 'name' },
                },
                {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
                },
                {
                title: 'Address',
                dataIndex: 'address',
                key: 'address',
                },
                {
                title: 'Tags',
                key: 'tags',
                dataIndex: 'tags',
                scopedSlots: { customRender: 'tags' },
                },
                {
                title: 'Action',
                key: 'action',
                scopedSlots: { customRender: 'action' },
                },
            ];
    
            var data = [
                {
                key: '1',
                name: 'shizhihua',
                age: 32,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
                },
                {
                key: '2',
                name: 'liyinan',
                age: 42,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
                },
                {
                key: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
                tags: ['cool', 'teacher'],
                },
            ];
            var vue = new Vue({
                // el: '#app',
                // data: {
                //     data:data,
                //     columns:columns,
                // },
                data() {
                    return {
                        data:data,
                        columns:columns,
                    };
                },
                // template:tableHtml
            }).$mount('#app');
        </script>
    </body>
    
    </html>

     

    展开全文
  • vue渲染表格时对时间的格式化处理

    千次阅读 2019-04-18 07:16:19
    <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="createdTime" label="日期" width="180" :formatter...
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="createdTime"
              label="日期"
              width="180" :formatter="formatDate">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户"
              width="180">
            </el-table-column>
            <el-table-column
              prop="actionType"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="actionStatus"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="address"
              label="详情">
              <template slot-scope="scope">
                <el-button type="text"style="font-size: 30px">···</el-button>
              </template>
            </el-table-column>
      </el-table>
      data(){
          return{
              tableData:[]
          }
      }
      methods:{
          formatDate(value){
            <!--例如后台传给我们的时间戳  -->
              this.value1= new Date(value.createdTime);//value.createdTime是prop绑定的字段名称
              let dateValue = this.$moment(this.value1).format("YYYY-MM-DD HH:mm:ss");//$moment专门转化时间的插件(使用时需要下载引入)
              return dateValue
          }
      }
      重点:在要用的那一行:formatter="formatDate"//formatDate初始化的函数名称(除了时间,需要初始化的数据都可用它)复制代码
    展开全文
  • 前言vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我...

    前言

    vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法

    亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢

    先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列

    解决问题核心点:横向滚动加载,竖向滚动加载

    项目背景

    笔者最近在做广告排期功能,需要进行点位预占,大的合同可能需要对多个资源排期,周期可能到几年这样,然后我们的页面交互是这样

    横向每个月30个单元格,最多的3年,36个月,每行36*30=1080个单元格

    竖向100个资源,总共约️10W个单元格,然后每个单元格里面会有一个输入框,一个库存总数,所以总数是20W个,内网使用,接口请求根本不是问题,可以浏览器渲染就扛不住了接口回来之后会出现几十秒的白屏,整个页面处于卡死状态

    这还不算,加载出之后页面操作也是非常卡,滑动延迟严重,页面基本处于瘫痪状态

    之前的功能是基于jquery开发的,项目重构用的vue,UI采用了ElementUI,ElmentUI中的表格在数据量较大是有严重的性能问题,最直接的表现就是白屏时间较长,而且会出现渲染错乱

    所以就想着自己实现一个表格,解决卡顿问题

    实现思路

    表格拆分,动态加载

    表格横向按月拆分,每个月份单独一个table,月份table外层放一个占位div,根据横向滚动位置控制展示

    竖向按资源拆分,同样包裹一个占位div,按照滚动位置动态加载,始终保持dom数量上线

    动态编辑,按需生成编辑输入框

    不同的标签在浏览器渲染时性能是不一样的,比如input这种标签就比span等标签重许多,所以不能满屏input

    方案就是点击单元格展示输入框,焦点丢失移除,此处的展示非display控制显示隐藏,而是v-if控制dom是否加载

    代码分解

    固定头

    v-bind:style="{ transform: 'translateX(' + scrollLeft + 'px)' }"

    v-for="(item, index) in monthData" v-bind:key="index">

    {{item.month}}

    v-for="(d_item, d_index) in item.days" v-bind:key="d_index"

    style="min-width:100px">{{d_item}}

    固定列

    位置position

    {{item.name}}

    表体

    style="width:3000px;"

    v-for="(item, index) in monthData" v-bind:key="index">

    v-if="Math.abs(index - curModule) < 3">

    style="height:30px"

    v-for="(p_item, p_index) in projectData"

    v-bind:key="p_index">

    v-if="Math.abs(p_index - curRow) < 20"

    cellspacing="0" cellpadding="0">

    @click="clickTd(p_index,item.month, d_item, $event)"

    v-for="(d_item, d_index) in item.days" v-bind:key="d_index">

    {{originProjectData[p_index][''+item.month][''+d_item]['last']}}

    @blur="blurTd(p_index,item.month, d_item)"

    v-if="originProjectData[p_index][''+item.month][''+d_item]['show']"

    v-model="originProjectData[p_index][''+item.month][''+d_item]['last']"

    v-focus="originProjectData[p_index][''+item.month][''+d_item]['focus']"/>

    经过如上优化,完美解决表格卡顿问题,但是我并没有封装组件,原因如下

    ·插件封装后会有很多限制,不能再用vue那种模板写法,用json传入数据,自定义内容不是很灵活

    ·可以根据自己的应用场景自行修改拓展,代码已经很简洁

    ·比较懒

    如果你有类似需求可以试一下我这个,也欢迎Star

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

    展开全文
  • vue表格渲染

    2020-03-03 16:48:39
    ​ 前段时间在工作过程中遇到了vue表格渲染的问题,具体的需求就是在一个页面中动态渲染出多个不定长表头和内容的表格,由于自己刚接触vue不久,所以在这个把自己的解决记录下来,方便自己和有需要的人做一下参考...
  • vue动态渲染表格

    2021-03-25 19:50:48
    所以需要动态渲染表格的列,如下图中2人团价格以及3人团价格表头 需求描述: 当后台管理员选择开团的类型后,所关联的参团商品设置sku时,会动态渲染参团类型所对应的价格。 如下图sku设置。 ![]...
  • 前言vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法点我在线体验Demo(请用电脑查看)亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到...
  • Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当中不会出现UI...
  • vue表格渲染数据

    2019-08-15 14:47:31
    vue渲染表格数据 表格中的状态用el-tag标签做的,下面为了省事,把标签删了,有需要的小伙伴可以去https://element.eleme.cn/2.0/#/zh-CN/component/installation上自己看看 <template> <el-table :...
  • vue渲染三级表格

    2019-10-22 13:33:10
    <template> <div> <table cellspacing="0" border="1"> <tr> <th v-for="(item,index) in title"> {{item.title}} </th>...temp...
  • 主要为大家详细介绍了vue+iview动态渲染表格的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: ...
  • ant design vue表格指定格式渲染

    万次阅读 多人点赞 2019-05-16 09:18:56
    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: ...
  • 目标效果 原始数据 { "data": [ { "projectName": "项目一", ...} ] 最终用v-for渲染即可 项目名称 模块名称 任务名称 完成进度 {{item.projectName}} {{item.modelName}} {{item.taskName}} {{item.completeRate}}
  • <el-table :data="tableData2" border style="width: 100%" max-height="300"> <el-table-column prop="num" label="序号" align="left" width="50"> <template s...
  • vue动态渲染表格,显示上万条数据

    千次阅读 2019-04-07 16:02:25
    <template> <!-- 表格 --> <div class="table-box"> <div class="tabletbody"> <div id="divScroll" style="float:right;"></div> <div cla...
  • 修改currentpage没有效果,要在分页el-pagination中添加这一句 :current-page.sync="currentPage" 相当于把currentPage变量和分页的当前页绑定
  • 本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下1、背景本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并。由于使用的是vue,想到MVVM是要用数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 789
精华内容 315
关键字:

vue渲染表格

vue 订阅