<template>
<div>
<button @click="save">保存</button>
<button @click="loaded">加载</button>
<wj-flex-grid style="height:250px;" :items-source="testDome" :showMarquee="true" :initialized="testDomeGridInit">
<wj-flex-grid-filter />
<wj-flex-grid-column binding="test1" header="测试1" :width="70" align="left" />
<wj-flex-grid-column binding="test2" header="测试2" :width="100" align="left" />
<wj-flex-grid-column binding="buttons" header="测试3" :width="80" align="left" :isReadOnly="true">
<wj-flex-grid-cell-template cellType="Cell">
<button >+添加</button>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column binding="test3" header="测试4" :width="70" align="left" />
<wj-flex-grid-column binding="test4" header="图" :width="60" align="left" :isReadOnly="true">
<wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
<div style="max-width:40px;height:40px;margin: 0 auto;">
<image style="width:100%;height:100%" :src="cell.item.colImg1"/>
</div>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
</wj-flex-grid>
</div>
</template>
<script>
export default {
name:"desQuoteList",
data(){
return {
grid:null,
testDome:[{
test1:"test测试1",
test2:"test测试2",
test3:"test测试3",
test4:"test测试4",
test5:"test测试5",
colImg1:""
}
},
methods:{
testDomeGridInit(flexGrid){
this.grid=flexGrid
},
save(){
localStorage.setItem("test_columnLayout",this.grid.columnLayout);
},
loaded(){
this.grid.columnLayout=localStorage.getItem("test_columnLayout");
}
}
}
</script>
//如上代码,运行后保存格式,在加载保护好的格式时wj-flex-grid-cell-template 标签内自定义内容不显示,DOM树中也没有
|