【14.2.3】axios返回数据改变dataSource后，initSpread时的样式消失了

Derrick.Jiao

本帖最后由 KD尤于 2021-11-24 10:08 编辑

<template>
<div>
      <div class='block' style='margin-bottom: 10px'>
         <el-button style='margin-left:15px' type='primary' @click='query'>查询</el-button>
         <el-button style='margin-left:15px' type='success' @click='add'>增加</el-button>
         <el-button style='margin-left:15px' type='warning' @click='save'>保存</el-button>


      </div>

      <gc-spread-sheets :hostClass="hostClass" @workbookInitialized="initSpread">
         <gc-worksheet :dataSource="tableData">
            <gc-column :headerText="'ID'" :dataField="'sid'" :width='150'></gc-column>
            <gc-column :headerText="'标题'" :dataField="'title'" :width='150'></gc-column>
            <gc-column :headerText="'图标'" :dataField="'icon'" :width='150'></gc-column>
            <gc-column :headerText="'路径'" :dataField="'path'" :width='150'></gc-column>
            <gc-column :headerText="'是否可见'" :dataField="'visiable'" :cellType="comboBoxCellType" :width='150'></gc-column>
            <gc-column :headerText="'菜单级别'" :dataField="'jb'" :width='150'></gc-column>
            <gc-column :headerText="'是否包含子菜单'" :dataField="'sfsub'" :width='150'></gc-column>
            <gc-column :headerText="'角色'" :dataField="'js'" :width='150'></gc-column>
            <gc-column :headerText="'备注'" :dataField="'bz'" :autofit=true></gc-column>
         </gc-worksheet>
      </gc-spread-sheets>
</div>
</template>

<script>
import GC from '@grapecity/spread-sheets'
export default {
  data () {
return {
   spread: null,
   hostClass: 'spread-host',
   tableData: []
}
  },
  computed: {
comboBoxCellType () {
   const cellType = new GC.Spread.Sheets.CellTypes.ComboBox()
   cellType.items([
      { text: 'true', value: 'true' },
      { text: 'false', value: 'false' }])
   return cellType
}
  },
  methods: {
initSpread: function (spread) {
   this.spread = spread
   const worksheet = this.spread.getActiveSheet()
   worksheet.setColumnWidth(0, 50.0, GC.Spread.Sheets.SheetArea.rowHeader)
   worksheet.setRowHeight(0, 25.0, GC.Spread.Sheets.SheetArea.colHeader)
   this.query()
},
query () {
   try {
      this.postRequest('/loadmenuqx').then(resp => {
      if (resp) {
         this.tableData = resp.obj
      }
      })
   } catch (e) {
      this.tableData = []
   }
},
add () {
   const worksheet = this.spread.getActiveSheet()
   worksheet.addRows(worksheet.getRowCount(), 1)
},
save () {

}
  }
}
</script>

<style>
.spread-host {
width: 100%;
height: 750px;
}
</style>

query 改变了gc-worksheet :dataSource绑定的tableData后，    worksheet.setColumnWidth(0, 50.0, GC.Spread.Sheets.SheetArea.rowHeader)    worksheet.setRowHeight(0, 25.0, GC.Spread.Sheets.SheetArea.colHeader)上面两句和gc-column 里的:cellType="comboBoxCellType"，都失效了请教个解决办法，谢谢

Derrick.Jiao · Derrick.Jiao

KD尤发表于 2021-11-24 09:24
initSpread: function (spread) {
this.spread = spread
this.query()

如果是想给列头设置值，可以用下面的代码
sheet.setValue(0,2,"ColumnHeader", GC.Spread.Sheets.SheetArea.colHeader);

Clark.Pan · Clark.Pan

您好，因为您用的是sheet level binding，该绑定会导致整个sheet发生变化。所以导致您目前的情况是完全正常的。建议您要么在绑定之后重新设置，要么更换其他绑定方式，参考：
https://demo.grapecity.com.cn/sp ... able-binding/purejs

KD尤 · KD尤

您好，感谢解答。请问绑定之后重新设置在哪里写，能指点一下吗？只需要列头显示名，单元格类型，fomteer，和列头宽高度就行，感谢！

KD尤 · KD尤

本帖最后由 KD尤于 2021-11-24 09:41 编辑

initSpread: function (spread) {
  this.spread = spread
  this.query()
},
query () {
  try {
this.postRequest('/loadmenuqx').then(resp => {
   if (resp) {
      this.tableData = resp.obj
      const worksheet = this.spread.getActiveSheet()
      worksheet.setColumnWidth(0, 50.0, GC.Spread.Sheets.SheetArea.rowHeader)
      worksheet.setRowHeight(0, 25.0, GC.Spread.Sheets.SheetArea.colHeader)
      worksheet.setDataSource(resp.obj)worksheet.setColumnWidth(0, 150)
worksheet.setColumnWidth(1, 150)
worksheet.setColumnWidth(2, 150)
worksheet.setColumnWidth(3, 150)
worksheet.setColumnWidth(4, 150)
worksheet.setColumnWidth(5, 150)
worksheet.setColumnWidth(6, 150)
worksheet.setColumnWidth(7, 150)       this.spread.resumePaint()
   }
})
  } catch (e) {
this.tableData = []
  }
},

初始化和查询方法改成这样列头高度可以保持，单元格的下拉框类型和宽度也能加上，但是列头别名加不上，能给个关键词吗

		自动登录	找回密码
密码			立即注册

[已处理] 【14.2.3】axios返回数据改变dataSource后，initSpread时的样式消失了

最佳答案

4 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证

微信认证勋章

元老葡萄