123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!--
- id: 选填,没有得话给随机id
- settting: handsontable得配置,其中必填data选项
- -->
- <template>
- <div style="height: 100%;">
- <div :id="id"></div>
- </div>
- </template>
- <script>
- import Handsontable from "handsontable-pro"
- import './../../../node_modules/handsontable-pro/dist/handsontable.full.css'
- import zhCN from 'handsontable-pro/languages/zh-CN';
- export default {
- props: {
- id: {
- type: String,
- default: function createRandomId() {
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
- }
- },
- // settings: {//必填
- // type: Object
- // }
- },
- data() { return {} },
- created() { },
- mounted() {
- // console.log(handsontable)
- // this.init()
- },
- methods: {
- getElement() {
- return {
- width: document.getElementById(this.id).clientWidth,
- height: document.getElementById(this.id).parentNode.clientHeight
- }
- },
- init(settings) {
- console.log("init")
- var hotElement = document.getElementById(this.id)
- var hotSettings = Object.assign({
- width: this.getElement().width,
- rowHeaders: true,
- colHeaders: true,
- filters: true,
- height: this.getElement().height,
- columnSorting: true, //添加排序
- sortIndicator: true, //添加排序
- renderAllRows: true,
- autoColumnSize: true,
- language: "zh-CN",
- manualColumnResize: true,
- manualColumnMove: true,
- dropdownMenu: [
- "filter_by_condition",
- "filter_action_bar"
- ]
- }, settings);
- console.log(hotSettings, settings)
- var hot = new Handsontable(hotElement, hotSettings);
- let pro = document.getElementById("hot-display-license-info");
- if (!!pro) {
- pro.parentNode.removeChild(pro);
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|