VTable使用问题:如何何设置只有一列不能选中操作

83 阅读1分钟

问题标题

如何何设置只有一列不能选中操作

问题描述

如何在表格中的某一列,点击单元格不会选中

解决方案

VTable在column中提供了disableSelectdisableHeaderSelect配置:

  • disableSelect: 该列内容部分禁用选中

  • disableHeaderSelect: 该列表头部分禁用选中

代码示例

const options = {
    columns: [
        {
            field: 'name',
            title: 'name',
            disableSelect: true,
            disableHeaderSelect: true
        },
        // ......
    ],
    //......
};

完整示例代码(可以粘贴到 编辑器 上尝试一下):

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto",
        disableSelect: true,
        disableHeaderSelect: true
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  columnWidthComputeMode: 'only-header'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

相关文档

相关api:www.visactor.io/vtable/opti…

github:github.com/VisActor/VT…