vxe-table怎么通过下拉框选项来控制其他列的内容显示隐藏？

Question

<!-- 1000多条数据做校验，并且不卡顿 -->
<template>

<vxe-table
    border
    show-overflow
    keep-source
    height="600"
    ref="xTable"
    :data="tableData"
    :edit-rules="validRules"
    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
    :row-config="{isHover: true}"
    :align="center"
>
    <vxe-column field="state" title="状态" min-width="50"></vxe-column>
    <vxe-column field="wbsNumber" title="ABC号" min-width="130"></vxe-column>
    <vxe-column
        field="name"
        title="名称"
        min-width="100"
        :edit-render="{}"
    >
        <template #edit="scope">
            <span v-if="scope.row.changeType !== '新增项'">{{scope.row.name}}</span>
            <vxe-input v-else v-model.trim="scope.row.name" @change="$refs.xTable.updateStatus(scope)"></vxe-input>
        </template>
    </vxe-column>
    <vxe-column
        field="budget"
        title="预算"
        min-width="100"
        :edit-render="{}"
    >
        <template #edit="scope">
            <span v-if="scope.row.changeType !== '新增项'">{{scope.row.budget}}</span>
            <vxe-input v-else v-model="scope.row.budget" @change="$refs.xTable.updateStatus(scope)" type="float" digits="2" min="0" :controls="false"></vxe-input>
        </template>
    </vxe-column>
    <vxe-column field="actualCost" title="实际成本" min-width="100"></vxe-column>
    <vxe-column field="changeType" title="变更类型" min-width="100" :edit-render="{type: 'default'}">
        <template #edit="scope">
            <span v-if="scope.row.changeType == '新增项'">{{scope.row.changeType}}</span>
            <vxe-select v-else v-model="scope.row.changeType" @change="val=>selectChange(val,scope.row)">
                <vxe-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
                ></vxe-option>
            </vxe-select>
        </template>
    </vxe-column>
    <vxe-column field="changeName" title="变更后名称" :edit-render="{}" min-width="100">
        <template #edit="scope">
            <span v-if="scope.row.changeType == '新增项' || scope.row.changeType == '变更金额'"></span>
            <vxe-input v-else v-model.trim="scope.row.changeName" @change="$refs.xTable.updateStatus(scope)"> 
        </vxe-input>
        </template>
    </vxe-column>
    <vxe-column field="changeAmount" title="变更后金额" :edit-render="{}" min-width="100">
        <template #edit="scope">
            <span v-if="scope.row.changeType == '新增项' || scope.row.changeType == '变更名称'"></span>
            <vxe-input v-else v-model="scope.row.changeAmount" @change="$refs.xTable.updateStatus(scope)" type="float" digits="2" min="0" :controls="false"> 
        </vxe-input>
        </template>
    </vxe-column>
    <vxe-column field="changeCause" title="变更原因" :edit-render="{}" min-width="100">
        <template #edit="scope">
            <span v-if="scope.row.changeType == '新增项'"></span>
            <vxe-textarea v-else v-model.trim="scope.row.changeCause" @change="$refs.xTable.updateStatus(scope)"> 
        </vxe-textarea>
        </template>
    </vxe-column>
    <vxe-column title="操作" width="80">
        <template v-slot="scope">
            <vxe-button type="text" status="danger" content="删除" @click="removeEvent(scope.row)"></vxe-button>
        </template>
    </vxe-column>
</vxe-table>
<vxe-button status="primary" content="提交" @click="validAllEvent"></vxe-button>
<vxe-button status="primary" content="新增1" @click="addData"></vxe-button>
<vxe-button status="primary" content="新增2" @click="addData2"></vxe-button>

</template>

<script lang='ts' setup>
import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import { t, VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import _ from 'lodash'
const onedit = ref(false);
const regionList = ref([]);
const tableData = ref([] as VxeTablePropTypes.Data);
const selectList = ref([

{ value: "0", label: "变更名称" }, 
{ value: "1", label: "变更金额" },
{ value: "2", label: "变更多项" },
]);

const xTable = ref();
//验证和正常表单一样
const validRules = ref({

name: [
  { required: true, message: "请输入名称" },
],
budget: [
  { required: true, message: "请输入预算" },
],
changeName: [
  { required: true, message: "请输入变更后名称" },
],
changeAmount: [
  { required: true, message: "请输入变更后金额" },
],
changeCause: [
  { required: true, message: "请输入变更原因" },
],
// describe: [
//   {
//     validator: validatePass //自定义校验方法
//   }
// ]

})

onMounted(() => {
  for(let i = 0; i < 10; i++){
    let obj = {
        state: '状态',
        abcNumber: `ABC123456789-000${i+1}`,
        name: '名称',
        budget: '123000.12',
        actualCost: '1000000.12',
        changeType: '变更多项',
        changeName: `变更后名称${i+1}`,
        changeAmount: `1${i+1}`,
        changeCause: '变更原因',
    }
    tableData.value.push(obj);
  }
}) 
function selectChange(sel: any, row: any){
    // console.log('sel138',sel)
}
// 删除
function removeEvent(row: any) {
    xTable.value.remove(row);
}
// 提交
const validAllEvent = async () => {
    const $table = xTable.value
    const errMap = await $table.validate(true)
    if (errMap) {
    VXETable.modal.message({ status: 'error', content: '校验不通过！' })
    } else {
    VXETable.modal.message({ status: 'success', content: '校验成功！' })
    }
}
//新增1
function addData(row: any) {
    let obj = {
        state: '状态',
        abcNumber: `ABC123456789-000abc`,
        name: '名称',
        budget: '190000',
        actualCost: '1000000.12',
        changeType: '变更多项',
        changeName: '',
        changeAmount: '',
        changeCause: '',
    };
    // xTable.value.insertAt(obj, row);//新增一行数据
    tableData.value.push(obj);
}
//新增2
function addData2(row: any) {
    let obj = {
        state: '状态',
        abcNumber: `ABC123456789-0001`,
        name: '',
        budget: '',
        actualCost: '1000000.12',
        changeType: '新增项',
        changeName: ' ',
        changeAmount: ' ',
        changeCause: ' ',
    };
    // xTable.value.insertAt(record, row);//新增一行数据
    tableData.value.push(obj);
}
const insertEvent = async () => {
    const $table = xTable.value
    const { row: newRow } = await $table.insert({})
    // 插入一条数据并触发校验
    const errMap = await $table.validate(newRow)
    if (errMap) {
    // 校验失败
    }
}

</script>
<style scoped lang='scss'>
</style>
需求：如何通过变更类型，去显示隐藏变更后的名称或金额的内容？当变更类型选择变更名称时，变更金额里的内容需隐藏掉，当变更类型选择变更金额时，变更名称里的内容需隐藏掉，当变更类型选择是变更多项时，则变更名称和变更金额里的内容都显示；
问题：目前这个判断是不生效的，请问怎么判断才有效？

Answer 1

1.在<vxe-column field="changeName">的<template>里添加v-show：

<vxe-column field="changeName" title="变更后名称" :edit-render="{}" min-width="100">
    <template #edit="scope">
        <vxe-input v-show="scope.row.changeType !== '新增项' && scope.row.changeType !== '变更金额'" v-model.trim="scope.row.changeName" @change="$refs.xTable.updateStatus(scope)"></vxe-input>
    </template>
</vxe-column>

2.在<vxe-column field="changeAmount">的<template>里添加v-show：

<vxe-column field="changeAmount" title="变更后金额" :edit-render="{}" min-width="100">
    <template #edit="scope">
        <vxe-input v-show="scope.row.changeType !== '新增项' && scope.row.changeType !== '变更名称'" v-model="scope.row.changeAmount" @change="$refs.xTable.updateStatus(scope)" type="float" digits="2" min="0" :controls="false"></vxe-input>
    </template>
</vxe-column>