列在表格中显示但不参与公共搜索comSearch
有一个需求，列在表格中显示，但不要在公共搜索中显示，读了源码后找到答案：
只需将列的 operator 属性设置为false,为false时不对列进行公共索引渲染。
comSearch的index.vue中是这样的：
language
<template v-if="item.operator !== false">
<!-- 自定义渲染 component、slot -->
<el-col
v-if="item.comSearchRender == 'customRender' || item.comSearchRender == 'slot'"
v-bind="{
xs: item.comSearchColAttr?.xs ? item.comSearchColAttr?.xs : 24,
sm: item.comSearchColAttr?.sm ? item.comSearchColAttr?.sm : 6,
...item.comSearchColAttr,
}"
>
<!-- 外部可以使用 :deep() 选择器修改css样式 -->
<div class="com-search-col" :class="item.prop">
<div class="com-search-col-label" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
<div class="com-search-col-input">
<!-- 自定义组件/函数渲染 -->
<component
v-if="item.comSearchRender == 'customRender'"
:is="item.comSearchCustomRender"
:renderRow="item"
:renderField="item.prop!"
:renderValue="baTable.comSearch.form[item.prop!]"
/>
<!-- 自定义渲染-slot -->
<slot v-else-if="item.comSearchRender == 'slot'" :name="item.comSearchSlotName"></slot>
</div>
</div>
</el-col>
<!-- 时间范围 -->
<el-col v-else-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')" :xs="24" :sm="12">
<div class="com-search-col" :class="item.prop">
<div class="com-search-col-label w16" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
<div class="com-search-col-input-range w83">
<el-date-picker
class="datetime-picker w100"
v-model="baTable.comSearch.form[item.prop!]"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
:type="item.comSearchRender == 'date' ? 'daterange' : 'datetimerange'"
:range-separator="$t('To')"
:start-placeholder="$t('el.datepicker.startDate')"
:end-placeholder="$t('el.datepicker.endDate')"
:value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
:teleported="false"
/>
</div>
</div>
</el-col>
<el-col v-else :xs="24" :sm="6">
<div class="com-search-col" :class="item.prop">
<div class="com-search-col-label" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
<!-- 数字范围 -->
<div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
<el-input
:placeholder="item.operatorPlaceholder"
type="string"
v-model="baTable.comSearch.form[item.prop! + '-start']"
:clearable="true"
></el-input>
<div class="range-separator">{{ $t('To') }}</div>
<el-input
:placeholder="item.operatorPlaceholder"
type="string"
v-model="baTable.comSearch.form[item.prop! + '-end']"
:clearable="true"
></el-input>
</div>
<!-- 是否 [NOT] NULL -->
<div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
<el-checkbox v-model="baTable.comSearch.form[item.prop!]" :label="item.operator" size="large"></el-checkbox>
</div>
<div v-else-if="item.operator" class="com-search-col-input">
<!-- 时间筛选 -->
<el-date-picker
class="datetime-picker w100"
v-if="item.render == 'datetime' || item.comSearchRender == 'date'"
v-model="baTable.comSearch.form[item.prop!]"
:type="item.comSearchRender == 'date' ? 'date' : 'datetime'"
:value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
:placeholder="item.operatorPlaceholder"
:teleported="false"
/>
<!-- tag、tags、select -->
<el-select
class="w100"
:placeholder="item.operatorPlaceholder"
v-else-if="
(item.render == 'tag' || item.render == 'tags' || item.comSearchRender == 'select') && item.replaceValue
"
v-model="baTable.comSearch.form[item.prop!]"
:multiple="item.operator == 'IN' || item.operator == 'NOT IN'"
:clearable="true"
>
<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
</el-select>
<!-- 远程 select -->
<BaInput
v-else-if="item.comSearchRender == 'remoteSelect'"
type="remoteSelect"
v-model="baTable.comSearch.form[item.prop!]"
:attr="item.remote"
:placeholder="item.operatorPlaceholder"
/>
<!-- 开关 -->
<el-select
:placeholder="item.operatorPlaceholder"
v-else-if="item.render == 'switch'"
v-model="baTable.comSearch.form[item.prop!]"
:clearable="true"
class="w100"
>
<template v-if="!isEmpty(item.replaceValue)">
<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
</template>
<template v-else>
<el-option :label="$t('utils.open')" value="1" />
<el-option :label="$t('utils.close')" value="0" />
</template>
</el-select>
<!-- 字符串 -->
<el-input
:placeholder="item.operatorPlaceholder"
v-else
type="string"
v-model="baTable.comSearch.form[item.prop!]"
:clearable="true"
></el-input>
</div>
</div>
</el-col>
</template>请先登录
感谢分享～
- 1
前往