Как добавить пользовательскую функцию поиска/фильтра для списка поиска DataTables с использованием шаблонов VUE? ⇐ Javascript

[Anonymous]

Я пытаюсь создать компонент Vue Datable, чтобы я мог сделать несколько таблиц, не беспокоясь об их общей настройке (поскольку это будет сделано в этом основном компоненте таблицы).
Одна из особенностей, которые я хочу, для столбцов, в которых используется список поиска (аналогично колонке MultiSelect в понятии) для распознавания клеток, которые имеют список значений (здесь описаны как «Tats». Мне нужна функция поиска, чтобы признать, что, если содержимое ячейки является списком, то каждый отдельный элемент в этом списке можно найти и учитывать, когда речь идет о фильтрации. Список < /li>
пытается сопоставить элементы в списке точки № 1 с выбранными тегами в списке поиска столбца. И я использую Vue в качестве дочернего компонента, а не как родительский. В справочной документации говорится, что мне нужно использовать метод dt () для доступа к API, который должен позволить мне изменить Columns.search () . Я видел пример того, как сделать это для предопределенного столбца с предварительно определенным поисковым запросом (здесь, с числами), но я застрял в том, как сделать это для общего сценария (опять же, компонент Vue предназначен как шаблон для любой таблицы, который я могу добавить). < /P>
Как я получу выбранную поисковую ставку, когда я не буду знать, какая -то столбец, каждая из них будет стоить каждая колонка, еще не будет содержать информацию. Как мне сделать то же самое для каждой ячейки? src="https://i.sstatic.net/Fg8R9pVo.png" />
Step 2: Display with Tag A selected (Tag A Tag B and Tag C count as a single value to searchList - Not intended)

Шаг 3: с выбранным тегом, элемент с тегами A B и C не появляется

код на main.js :

Код: Выделить всё

import './assets/css/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import '@fortawesome/fontawesome-free/js/all'

const app = createApp(App)

app.use(router)

app.mount('#app')

код на app.vue :

Код: Выделить всё

import { RouterView } from 'vue-router'

import Sidebar from './components/sidebar/Sidebar.vue';
import {sidebarWidth} from './components/sidebar/sidebar-state.js';










#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

#nav {
padding: 30px;
}

#nav a {
font-weight: bold;
color: #2c3e50;
}

#nav a.router-link-exact-active {
color: #42b983;
}

код в Table.vue :

Код: Выделить всё

import jquery from 'jquery';
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net-dt';
import 'datatables.net-colreorder-dt';
import 'datatables.net-columncontrol-dt';
import 'datatables.net-fixedheader-dt';
import 'datatables.net-fixedcolumns-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-searchpanes-dt';

DataTable.use(DataTablesLib);

const props = defineProps({
columns: {
default: [
{data: 'id', title: 'PersonId',},
{data: 'name', title: 'PersonName',},
]
},
options: {
default: {
responsive: true,
scrollX: true,
fixedHeader: true,
fixedColums: true,
colReorder: true,
paging: false,
scrollY: 300,
scrollCollapse: true,
columnControl: ['order', ['searchList']],
ordering: {
indicators: false
}
}
},
data: {
default: [
{name:'RowItem1ValueA', id:'RowItem1ValueB'},
{name:'RowItem2ValueA', id:'RowItem2ValueB'},
]
}
})









@import 'datatables.net-dt';
@import 'datatables.net-responsive-dt';
@import 'datatables.net-fixedheader-dt';
@import 'datatables.net-fixedcolumns-dt';
@import 'datatables.net-colreorder-dt';
@import 'datatables.net-columncontrol-dt';
@import 'datatables.net-searchpanes-dt';



th, td { white-space: nowrap; }

td.multiples{
white-space: pre-wrap;
}

div.dataTables_wrapper {
margin: 0 auto;
}

div.container {
width: 80%;
}

код на OrganizationView.vue (Просмотреть, где я пытаюсь использовать таблицу по умолчанию в качестве шаблона для «случайных» данных):

Код: Выделить всё

import Table from '../components/table/Table.vue'

const tableInfoPeople = {
'Columns': [
{data: 'dtPerson', title: 'Person',},
{
data: 'dtTags',
title: 'MultiTags',
render: {
_: '[, ].id',
sp: '[].id'
}
},
],
'Data': [
{ dtPerson: 'Name01',
dtTags: [
{'id': 'TagA'}
],
},
{ dtPerson: 'Name02',
dtTags: [
{'id': 'TagA'}, {'id': 'TagB'}, {'id': 'TagC'}
],
},
{
dtPerson: 'Name03',
dtTags: [{'id': 'TagD'}],
},

]
}

Я ценю любую помощь, которую вы можете мне оказать.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -using-vue