要求：有两个多选框，
第一个：草稿、审核中、驳回、已通过
第二个：离线、在线
注：第二个多选框只能在第一个选择已通过时选择
图示：
代码：
//vue html
<el-form
ref="manageRef"
:inline="true"
label-position="right"
:model="newsForm"
class="demo-form-inline"
label-width="120px"
style="max-width: 1250px"
>
<div class="topitems">
<el-form-item label="状态：" prop="reslut">
<el-select v-model="newsForm.reslut" placeholder="请选择" @change="getPass">
<el-option label="草稿" value="0" />
<el-option label="审核中" value="1" />
<el-option label="驳回" value="2" />
<el-option label="已通过" value="-1" />
</el-select>
</el-form-item>
<el-form-item label="审核结果：">
<el-select
v-model="searchStatus"
placeholder="请选择"
:disabled="Number(newsForm.reslut) != -1"
@change="changeStatus"
>
<el-option label="离线" value="3" />
<el-option label="在线" value="4" />
</el-select>
</el-form-item>
<el-form-item>
<div class="check-btns">
<el-button type="primary" class="btns" @click="wordSearch">查询</el-button>
<el-button class="bdc_btn" @click="resetForm()">重置</el-button>
</div>
</el-form-item>
</div>
</el-form>
//js
const newsForm = reactive({
status: '',
reslut: '',
})
const searchStatus = ref('')
const getPass = (val: string) => {
val === '-1' ? (newsForm.status = '3') : (newsForm.status = '')
searchStatus.value = newsForm.status
}
const changeStatus = (val: string) => {
newsForm.status = val
}
//列表页接口【所有数据】
const newsData = ref<SData[]>([])
const newsList = async () => {
const res = await news_api({
current: page.value,
size: size.value,
...newsForm, //扩展运算符【展开查询列表】
})
if (res.status === 1) {
newsData.value = res.body.records
total.value = res.body.total
}
}
newsList()
const wordSearch = () => {
if (newsForm.reslut !== '-1') {
newsForm.status = newsForm.reslut
}
//查询时，重新加载列表页数据
newsList()
}
//重置
const manageRef = ref<any>({})
const resetForm = () => {
manageRef.value.clearValidate()
manageRef.value.resetFields()
searchStatus.value = ''
}
