elementUI 动态生成几行几列的方法示例


Posted in Javascript onJuly 11, 2019

elementUI 动态生成几行几列 table

现在碰到一个需求:就是根据用户选择的行列,来自动生成相应大小的 table,如下这个实现还不完善,因为数据不对,只是实现了动态的效果,仅是提供一种实现思路吧,后续我会再想想看怎么实现为好,先记录一下吧
直接看代码吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>elementUI table 动态生成列</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <style type="text/css">
  @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");
 </style>
</head>
<body>

<div id="app">

 <el-form inline>

  <!--先选择 排数-->
  <el-form-item label="请选择排" style="margin-left: 50px;">
   <el-select style="width: 100% ;" v-model="row1" placeholder="请选择排" @change="row1Change">
    <el-option v-for="item in floorNumList" :key="item.floorId"
          :value="item.floorId"></el-option>
   </el-select>
  </el-form-item>

  <!--再选择 列数-->
  <el-form-item label="请选择列">
   <el-select style="width: 100% ;" v-model="col1" placeholder="请选择列" @change="col1Change">
    <el-option v-for="item in floorNumList" :key="item.floorId"
          :value="item.floorId"></el-option>
   </el-select>
  </el-form-item>

  <el-table ref="multipleTable" :data="rowDataList1" style="width:80%; border: 2px solid red; max-height: 500px; margin-left: 30px;" highlight-current-row :cell-style="cellStyle">
   <el-table-column fixed type="selection" align="center" width="50" label="列"></el-table-column>
<!--   <el-table-column type="index" align="center" width="50" label="索引"></el-table-column>-->
   <el-table-column v-for="col in colDataList1" :prop="col.id" :label="col.id" align="center" >
    <el-table-column prop="id" align="center" >
     <template slot-scope="scope">
      <el-button @click="handleClick(scope.row, col.id, scope.$index)" class="el-icon-cherry" v-bind:style="{ color: activeColor}">></el-button>
     </template>
    </el-table-column>
   </el-table-column>
  </el-table>
 </el-form>
 </div>
</div>

<script>
 let vm = new Vue({
  el: '#app',
  data(){
   return{
    floorNumList: [
     {floorId: 1},
     {floorId: 2},
     {floorId: 3},
     {floorId: 4},
     {floorId: 5},
     {floorId: 6},
     {floorId: 7},
     {floorId: 8},
     {floorId: 9},
     {floorId: 10}
    ],
    floorNum: '',

    // 第1层 默认选择的排数 和 列数
    row1: 1,
    col1: 1,
    // 第2层 默认选择的排数 和 列数
    row2: 1,
    col2: 1,
    // 第3层 默认选择的排数 和 列数
    row3: 1,
    col3: 1,
    // 第4层 默认选择的排数 和 列数
    row4: 1,
    col4: 1,
    // 第5层 默认选择的排数 和 列数
    row5: 1,
    col5: 1,

    activeColor: 'green',

    colPos: '',
    rowPos: '',



    rowDataList1: [{ // 默认给一个对象,即默认状态是 1行数据
     id: Math.ceil(Math.random()*100)
    }],

    colDataList1: [
     {id: '1'}
    ],
   }
  },
  methods:{
   col1Change(){
    // 每触发一次,清空数据
    this.colDataList1 = [{id: '1'}];
    // 取得 选中的第一层的第一排的数值
    let len = this.col1;
    if(len > 1){
     for (let i = 2; i <= len; i++){
      this.colDataList1.push({id: i + ''});
     }
     return this.colDataList1;
    }else{
     return this.colDataList1;
    }
   },

   row1Change(){
    // 每触发一次,清空数据
    this.rowDataList1 = [{ id: Math.ceil(Math.random()*100)}];
    let len = this.row1;
    if (len > 1){
     for (let i = 2; i <= len ; i++){
      this.rowDataList1.push({id: Math.ceil(Math.random()*100) + i});
     }
     return this.rowDataList1;
    }else {
     return this.rowDataList1;
    }
   },

   handleClick(row, col, index) {
    // console.log(JSON.stringify(row));
    // console.log(JSON.stringify(col));
    // console.log("点击的cell 行数: " + JSON.stringify(index)); // index 是 行数,0 表示第一行,从 0 开始
    // 一点击获取 行纵坐标
    this.colPos = col;
    this.rowPos = index;
   },

   cellStyle({row, column, rowIndex, columnIndex}){
    // console.log(JSON.stringify(row))
    // console.log(JSON.stringify(column))
    // console.log("要渲染的行数: " + JSON.stringify(rowIndex))
    // console.log(JSON.stringify(columnIndex))

    if(rowIndex == 0 && columnIndex == 0){
     return '';
    }else {
     if(rowIndex == this.rowPos && columnIndex == this.colPos){ //指定坐标
      return 'background: pink';
     }else{
      return '';
     }
    }

   },

  }
 });
</script>
</body>
</html>

为了方便大家直接使用理解,我这里使用的脚本等都是在线链接,确保大家直接 down 下来就能运行处效果的。

效果图

elementUI 动态生成几行几列的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
详解用node编写自己的cli工具
May 23 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
JS为什么说async/await是generator的语法糖详解
Jul 11 #Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 #Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 #Javascript
ES6的异步终极解决方案分享
Jul 11 #Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 #Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 #Javascript
vue webpack重写cookie路径的方法
Jul 10 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python轮询机制控制led实例
2020/05/03 Python
python 发送get请求接口详解
2020/11/17 Python
学校后勤岗位职责
2014/02/19 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js