tabulator 相关问题

我正在使用Vue3和Tabulator（5.2.7）来获取数据表。我正在使用组合 API。我在下面的部分中省略了一些不相关的代码。 //数据表.vue 导入 { 制表符...</desc> <question vote="3"> <p>我正在使用 Vue3 和 Tabulator (5.2.7) 来获取数据表。我正在使用 Composition API。</p> <p>我在下面省略了一些不相关的代码。</p> <pre><code>//DataTable.vue <script setup> import { TabulatorFull as Tabulator } from 'tabulator-tables'; import { useDataStore } from '@/stores/DataStore.vue'; import { ref, reactive, onMounted } from 'vue'; const store = useDataStore(); //get data from state manager // this is as per the tabulator docs w/vue const table = ref(null); const tabulator = ref(null); const tableData = reactive(store.getData); onMounted(() => { tabulator.value = new Tabulator(table.value, { layout: "fitDataTable", data: tableData, reactiveLayout: true, responsiveLayout: true, selectable: 1, // be able to select only 1 row at a time columns: [ {formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function(e, cell) { const r = cell.getRow(); console.log(r._row.data); } // some more data but its just regular title/field assoc. ] }) }); // added this as per the comment reply tabulator.value.on('rowClick', function(e, row) { console.log('hello world') }) //this did not work, but i tried it anyway // tabulator.on('rowClick', function(e, row) { // console.log('hello world') // }) </script> <template> <div ref="table"></div> </template> </code></pre> <p>不幸的是，我无法分享屏幕截图，但我有一张图片： <a href="https://i.stack.imgur.com/lfeGZ.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2xmZUdaLnBuZw==" alt=""/></a></p> <p>所以我想要发生的是，当我勾选复选框（红色区域）时，它将控制台记录数据（并最终执行其他操作）。当我单击绿色区域（单元格的其余部分）时，它会执行此操作，并选择该行。当我单击该复选框时，它没有。该行已被选中，但它不会控制台日志或触发任何功能。</p> <p>我尝试传递记录的（<a href="http://tabulator.info/docs/5.2/events#row" rel="nofollow noreferrer">http://tabulator.info/docs/5.2/events#row</a>）事件侦听器和回调，但每次我尝试执行<pre><code>table.on()</code></pre>，例如<pre><code>table.on("rowDblClick", () => {return 1})</code></pre>时，它都会给出我的一个错误是 <pre><code>table.on</code></pre> 不是一个函数，行事件监听器在 5.0 中被删除了。</p> <p>我使用 Tabulator 的唯一原因是因为 Vuetify 还不能与 Vue3 一起使用（如果我记得的话，它仍然处于测试阶段），我在我的 google quests 中找到了这个。</p> <p>编辑：或者，如果有人知道如何让内置事件侦听器或 <pre><code>rowClick</code></pre> 回调参数起作用，那将是一个可以接受的解决方案。</p> </question> <answer tick="false" vote="1"> <p>如果您使用行选择格式化程序，那么您可以监听 <pre><code>rowSelected</code></pre> 和 <pre><code>rowDeselected</code></pre> 事件，这将传入选定/取消选定行的行组件：</p> <pre><code>table.on("rowSelected", function(row){ //row - row component for the selected row }); </code></pre> <p>有关选择事件的文档可以在这里找到： <a href="http://tabulator.info/docs/5.2/events#select" rel="nofollow noreferrer">http://tabulator.info/docs/5.2/events#select</a></p> <p>有关如何使用行组件的文档可以在这里找到： <a href="http://tabulator.info/docs/5.2/components#component-row" rel="nofollow noreferrer">http://tabulator.info/docs/5.2/components#component-row</a></p> </answer> <answer tick="false" vote="0"> <p>通过将制表符事件侦听器移动到 onMounted 块中，可以使用 rowCLick 来实现此功能。另外，在 ts 中，必须将 tabulaot ref 更改为 tabulator_full 导入的类型</p> <pre><code>const tabulator = ref(Tabulator) </code></pre> <hr/> <pre><code>onMounted(() => { tabulator.value = new Tabulator(table.value, { layout: "fitDataTable", data: tableData, columns: ... }) tabulator.value.on("rowClick", function(e, row){ //do something } }); </code></pre> <p>}</p> </answer> </body></html>

javascript vue.js tabulator

回答 0 投票 0

允许多行选择或仅通过复选框选择

在制表符中如果 table.selectable = true，那么当单击任何单元格时，都会选择该行，我不希望这样，我希望仅通过复选框选择该行，所以我设置 selectable = false。不...

javascript html tabulator

回答 1 投票 0

Angular Tabulator 表日期未显示

我在 Angular 组件中渲染制表符表时遇到问题。我已经在 TypeScript 文件 (test.component.ts) 中定义了数据 (tableData) 和列 (tableColumns) 并尝试

angular tabulator

回答 1 投票 0

无法让简单的 Sveltekit、Tabulator 应用程序正常工作

当我尝试向 Sveltekit 入门应用程序添加一个简单的制表器组件时，页面在屏幕上闪烁，但没有表格，然后我收到“500 内部错误”。我不知道如何调试这个......