*django_filters的FilterSet如何过滤null和其他内容组合的内容（带@filter-change用例）？

示例

class XxxFilterSet(FilterSet):
	field = filters.CharFilter(method='filter_multi_field', required=True)

	def filter_multi_field(self, queryset, name, value):
		value_list = value.split(',')
		if 'null' in value_list:
			value_list.remove('null')
			queryset = queryset.filter(Q(**{f'{name}__isnull': None}) | Q(**{f'{name}__in': value_list}))
		else:
			queryset = queryset.filter(**{f'{name}__in': value_list})
			return queryset

附：

html

<template>
	<el-table ...
			  @filter-change="filters => {
				  tableFilterChange(filters, res => {
					  filterParams = {...filtersParams, ...res}
					  getDataFunction(...)
				  })
			  }"
	>
		<el-table-column label="标签"
						 prop="label"
						 :filters="[...optionList.map(item => ({
							 text: item.title,
							 value: item.id,
						 })), {text: '无标签', value: 'null'}]"
						 column-key="label"
		>
			<template slot-scope="scope">
				<span v-if="!scope.row.editLabelVisible">
					<el-popover trigger="hover"
								placement="top-start"
								:disabled="arrayToString(scope.row.label_titles).length <= 20"
					>
						{{arrayToString(scope.row.label_titles)}}
						<span slot="reference">
							<span v-if="scope.row.label_titles.length" class="text-overflow-hidden">
								{{arrayToString(scope.row.label_titles)}}
							</span>
							<span v-else style="color: #coc4cc">
								暂无
							</span>
							<el-button type="text"
									   icon="el-icon-edit"
									   @click="scope.row.editLabelVisible = true"
									   style="position: absolute;top: 13px;right: 0"
							></el-button>
						</span>
					</el-popover>
				</span>
				<span v-else>
					<el-select v-model="scope.row.label"
							   placeholder="请选择（搜索不到可新增）"
							   default-first-option
							   automatic-dropdown
							   filterable
							   clearable
							   multiple
							   collapse-tags
					>
						<div slot="empty">
							<p style="font-size: 14px;margin-left: 15px">
								没有找到想要的内容？
								<el-link type="primary"
										 @click="() => {
											 $prompt('请输入名称', '新增标签', {
											 	inputPattern: /.+/,
											 	inputErrorMessage: '请输入内容',
											 	closeOnClickModal: false,
											 }).then(({value}) => {
											 	labelAddFunction(...)
											 }).catch(() => {
											 	$message.info('已取消')
											 })
										 }"
								>立即新增</el-link>
							</p>
						</div>
						<el-option v-for="item in optionList"
								   :label="item.title"
								   :value="item.id"
								   :key="'labelOption-' + item.id"
						>
							<el-row type="flex" justify="space-between">
								<div>{{item.title}}</div>
								<div>
									<el-link type="primary"
											 icon="el-icon-edit-outline"
											 @click.stop="() => {
												  $prompt('请输入名称', '编辑标签', {
													  inputPattern: /.+/,
													  inputErrorMessage: '请输入内容',
													  inputValue: item.title,
													  closeOnClickModal: false,
												  }).then(({value}) => {
													  labelEditFunction(...)
												  }).catch(() => {
													  $message.info('已取消')
												  })
											  }"
									></el-link>
									<span @click.stop>
										<el-popconfirm :title="`确定删除《${item.title}》吗？`"
													   @confirm="deleteFunction(...)"
										>
											<el-link type="danger"
													 icon="el-icon-delete"
													 slot="reference"
													 style="margin-left: 5px"
													 ></el-link>
										</el-popconfirm>
									</span>
								</div>
							</el-row>
						</el-option>
					</el-select>
					<el-button type="primary"
							   size="mini"
							   style="margin: 5px 0 0 10px"
							   @click="tableEditFunction(...)"
					>确定</el-button>
					<el-button type="plain"
							   size="mini"
							   style="margin: 5px 0 0 10px"
							   @click="tableEditFunction(...) // 最好带个刷新table数据的回调函数"
					>取消</el-button>
				</span>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	data() {
		return {
			filterParams: {},
		}
	},
	methods: {
		tableFilterChange(filters, cb) {
			let filterParams = {}
			for (let [k, v] of Object.entries(filters)){
				filterParams[k] = v.join(',')
			}
			cb && cb(filterParams)
		},
	},
	computed: {
		arrayToString() {
			return (array, textKey='title', symbol='、') => {
				return array.map(it => typeof it === 'string'?it:it[textKey]).join(symbol)
			}
		}
	}
</script>


<style>
    .text-overflow-hidden{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>