vue3组合式Api使用handsontable的12.3.1版本 获取设置了只读的行和列的数据

可以通过以下步骤获取和设置只读行和列的数据：

1. 安装handsontable：

npm install handsontable --save

2. 在Vue组件中引入handsontable：

import Handsontable from 'handsontable';

3. 在Vue组件中使用handsontable：

<template>
  <div ref="hotTable"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Handsontable from 'handsontable';

export default {
  setup() {
    const hotTable = ref(null);
    
    onMounted(() => {
      const container = hotTable.value;
      const data = [
        [1, 'John', 'Doe'],
        [2, 'Jane', 'Doe'],
        [3, 'Bob', 'Smith'],
        [4, 'Mary', 'Johnson']
      ];
      const readOnlyRows = [0, 2];
      const readOnlyColumns = [1];
      
      const hot = new Handsontable(container, {
        data: data,
        readOnly: true,
        readOnlyRows: readOnlyRows,
        readOnlyColumns: readOnlyColumns
      });
    });

    return {
      hotTable
    }
  }
}
</script>

4. 获取只读行和列的数据：

const hot = hotTable.value.hotInstance;
const data = hot.getData();
const readOnlyData = [];

for (let i = 0; i < data.length; i++) {
  const rowData = [];
  for (let j = 0; j < data[i].length; j++) {
    if (hot.getCellMeta(i, j).readOnly) {
      rowData.push(data[i][j]);
    }
  }
  readOnlyData.push(rowData);
}

console.log(readOnlyData);

5. 设置只读行和列的数据：

const hot = hotTable.value.hotInstance;
const newData = [
  [1, 'John', 'Doe'],
  [2, 'Jane', 'Smith'],
  [3, 'Bob', 'Johnson'],
  [4, 'Mary', 'Williams']
];
const readOnlyRows = [0, 2];
const readOnlyColumns = [1];

hot.loadData(newData);
hot.updateSettings({
  readOnlyRows: readOnlyRows,
  readOnlyColumns: readOnlyColumns
});