广州微信小程序开发_elementUI 动态生成几行几列的

elementUI 动态生成几行几列的方法示例       这篇文章主要介绍了elementUI 动态生成几行几列的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title elementUI table 动态生成列 /title 
 script src="npm/vue" /script 
 script src="element-ui/lib/index.js" /script 
 style type="text/css" 
 @import url("element-ui/lib/theme-chalk/index.css");
 /style 
 /head 
 body 
 div id="app" 
 el-form inline 
 !--先选择 排数-- 
 el-form-item label="请选择排" 
 el-select 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 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" highlight-current-row :cell- 
 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)" v-bind: /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 下来就能运行处效果的。

效果图


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



扫描二维码分享到微信