handsontable.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!--
  2. id: 选填,没有得话给随机id
  3. settting: handsontable得配置,其中必填data选项
  4. -->
  5. <template>
  6. <div style="height: 100%;">
  7. <div :id="id"></div>
  8. </div>
  9. </template>
  10. <script>
  11. import Handsontable from "handsontable-pro"
  12. import './../../../node_modules/handsontable-pro/dist/handsontable.full.css'
  13. import zhCN from 'handsontable-pro/languages/zh-CN';
  14. export default {
  15. props: {
  16. id: {
  17. type: String,
  18. default: function createRandomId() {
  19. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  20. }
  21. },
  22. // settings: {//必填
  23. // type: Object
  24. // }
  25. },
  26. data() { return {} },
  27. created() { },
  28. mounted() {
  29. // console.log(handsontable)
  30. // this.init()
  31. },
  32. methods: {
  33. getElement() {
  34. return {
  35. width: document.getElementById(this.id).clientWidth,
  36. height: document.getElementById(this.id).parentNode.clientHeight
  37. }
  38. },
  39. init(settings) {
  40. console.log("init")
  41. var hotElement = document.getElementById(this.id)
  42. var hotSettings = Object.assign({
  43. width: this.getElement().width,
  44. rowHeaders: true,
  45. colHeaders: true,
  46. filters: true,
  47. height: this.getElement().height,
  48. columnSorting: true, //添加排序
  49. sortIndicator: true, //添加排序
  50. renderAllRows: true,
  51. autoColumnSize: true,
  52. language: "zh-CN",
  53. manualColumnResize: true,
  54. manualColumnMove: true,
  55. dropdownMenu: [
  56. "filter_by_condition",
  57. "filter_action_bar"
  58. ]
  59. }, settings);
  60. console.log(hotSettings, settings)
  61. var hot = new Handsontable(hotElement, hotSettings);
  62. let pro = document.getElementById("hot-display-license-info");
  63. if (!!pro) {
  64. pro.parentNode.removeChild(pro);
  65. }
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. </style>