[Bug]: In vue2, when using HotColumn slot, there is no readonly html style

[watchingfun]

Describe the bug

i use this example: https://handsontable.com/docs/javascript-data-grid/vue-hot-column/#a-more-advanced-example

When I add the readonly attribute on the HotColumn tag or the cellProperties of the custom component, there is no htDimmed class name on the td tag

However, read-only styles can be applied normally to HotColumn components that have no child components.

Video/Screenshots

Provide a link to the demo with the bug reproduction

https://jsfiddle.net/4jeh9d8k/

Handsontable version

handsontable@14.3

Framework version

No response

Your environment

chrome

[AMBudnik]

Hi @watchingfun

The mentioned ColorPicker editor is used for the 2nd column, which is not editable. Once you remove the following line

cellProperties: {readOnly: true}, //line 21

the editor in the 2nd column opens on a double click/enter.

Now, on the image, you show us the htDimmed (readOnly class) in the last column. So I am not sure what is the desired outcome in this situation. Would you like the last column (header D) to be editable?

[watchingfun]

你好@watchingfun

上述ColorPicker编辑器用于第二列，不可编辑。删除以下行后

cellProperties: {readOnly: true}, //第 21 行

双击/输入即可打开第二列中的编辑器。

现在，在图像上，您向我们展示了htDimmed最后一列中的（readOnly 类）。所以我不确定在这种情况下期望的结果是什么。您希望最后一列（标题D）可编辑吗？

The last column and the penultimate column are both set to readonly, and then only the last column has the htDimmed class name；

I hope that the columns that are set to read-only will have htDimmed style

[watchingfun]

I found the solution, manually adding the class using the beforeRenderer hook

[AMBudnik]

Thank you for the update. Yes, I was going through the code (not all of it) and in some cases the editor is not possible but it is not due to the readOnly mode (that gives the htDimmed class name) but through settings like this one (blocking click events)

  methods: {
    stopMousedownPropagation(e) {
      e.stopPropagation();
    }

[watchingfun]

Thank you for the update. Yes, I was going through the code (not all of it) and in some cases the editor is not possible but it is not due to the readOnly mode (that gives the htDimmed class name) but through settings like this one (blocking click events)

  methods: {
    stopMousedownPropagation(e) {
      e.stopPropagation();
    }

Thank you answer Yes, I know how to implement read-only functionality. My problem here is that the hotcolumn component only has read-only functionality after the read-only attribute, and there is no read-only html style.