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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
Javascript面向对象编程
Mar 18 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
深入理解js中的加载事件
Feb 08 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
继承公证书样本
2014/04/04 职场文书
小学生作文评语
2014/04/18 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
会议营销主持词
2015/07/03 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
班主任培训研修日志
2015/11/13 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android