使用elementUI怎么动态生成几行几列

tangjin

作者

这期内容当中小编将会给大家带来有关使用elementUI怎么动态生成几行几列，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>elementUItable动态生成列</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
<scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
<styletype="text/css">
@importurl("https://unpkg.com/element-ui/lib/theme-chalk/index.css");
</style>
</head>
<body>

<divid="app">

<el-forminline>

<!--先选择排数-->
<el-form-itemlabel="请选择排">
<el-selectv-model="row1"placeholder="请选择排"@change="row1Change">
<el-optionv-for="iteminfloorNumList":key="item.floorId"
:value="item.floorId"></el-option>
</el-select>
</el-form-item>

<!--再选择列数-->
<el-form-itemlabel="请选择列">
<el-selectv-model="col1"placeholder="请选择列"@change="col1Change">
<el-optionv-for="iteminfloorNumList":key="item.floorId"
:value="item.floorId"></el-option>
</el-select>
</el-form-item>

<el-tableref="multipleTable":data="rowDataList1"highlight-current-row:cell->
<el-table-columnfixedtype="selection"align="center"width="50"label="列"></el-table-column>
<!--<el-table-columntype="index"align="center"width="50"label="索引"></el-table-column>-->
<el-table-columnv-for="colincolDataList1":prop="col.id":label="col.id"align="center">
<el-table-columnprop="id"align="center">
<templateslot-scope="scope">
<el-button@click="handleClick(scope.row,col.id,scope.$index)"class="el-icon-cherry"v-bind:>></el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
</el-form>
</div>
</div>

<script>
letvm=newVue({
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'}];
//取得选中的第一层的第一排的数值
letlen=this.col1;
if(len>1){
for(leti=2;i<=len;i++){
this.colDataList1.push({id:i+''});
}
returnthis.colDataList1;
}else{
returnthis.colDataList1;
}
},

row1Change(){
//每触发一次，清空数据
this.rowDataList1=[{id:Math.ceil(Math.random()*100)}];
letlen=this.row1;
if(len>1){
for(leti=2;i<=len;i++){
this.rowDataList1.push({id:Math.ceil(Math.random()*100)+i});
}
returnthis.rowDataList1;
}else{
returnthis.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>

上述就是小编为大家分享的使用elementUI怎么动态生成几行几列了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

使用elementUI怎么动态生成几行几列