如何减少Tree视图的列的宽度？

问题描述

我想减小列的宽度，以便变得合适。如您在此处（https://i.stack.imgur.com/VK6w8.png所见，表格是不规则的，有些列不可见。我该如何解决这个问题？

这是我的代码：

  import React,{ useEffect,useState } from "react";

const myArray = [
  { name: "cat",count: 0 },{ name: "dog",{ name: "hamster",{ name: "lizard",count: 0 }
];

function shuffle(arra1) {
  var ctr = arra1.length,temp,index;
  while (ctr > 0) {
    index = Math.floor(Math.random() * ctr);
    ctr--;
    temp = arra1[ctr];
    arra1[ctr] = arra1[index];
    arra1[index] = temp;
  }
  return arra1;
}

function App(props) {
  const [list,setList] = useState(myArray);
  useEffect(() => {
    const mountArray = shuffle(myArray);
    setList(mountArray);
  },[]);

  function handleShuffle() {
    const changes = shuffle([...list]);
    setList(changes);
    console.log("Shuffle",myArray);
  }

  return (
    <div>
      {list.map((x,index) => (
        <div key={x.name + x.index}>
          {x.name} - {x.count}
          <button onClick={() => setList([...list],(x.count = x.count + 1))}>
            +
          </button>
        </div>
      ))}
      <button onClick={handleShuffle}>Shuffle</button>
    </div>
  );
}

export default App;

解决方法

您可以使用column（）方法设置Treeview列的宽度。

...
Table.heading(1,text="Book name")
Table.column(1,width=50)
...