问题：

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

齐阎宝

2023-05-15

<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>

{ 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>
需求：如何通过变更类型，去显示隐藏变更后的名称或金额的内容？当变更类型选择变更名称时，变更金额里的内容需隐藏掉，当变更类型选择变更金额时，变更名称里的内容需隐藏掉，当变更类型选择是变更多项时，则变更名称和变更金额里的内容都显示；
问题：目前这个判断是不生效的，请问怎么判断才有效？

共有1个答案

阎承

2023-05-15

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>

类似资料：

控制文字内容的显示与隐藏示例

本文向大家介绍控制文字内容的显示与隐藏示例，包括了控制文字内容的显示与隐藏示例的使用技巧和注意事项，需要的朋友参考一下
通过一个导航选项卡控制多个选项卡内容

问题内容：我有一个常规的Twitter Bootstrap 3标签。我要做的就是控制一个元素来控制多个容器。在此示例中，当我更改标签时，仅第一个被更改。我要两个容器都改变，而不仅仅是第一个。谢谢！问题答案：我将 data-target 属性添加到a元素并更改第二个tab内容中的id 我修改了这行您的：我的更新：第二个选项卡内容，您的：我的更新：
通过下拉列表中的值-Angularjs选择选项

我有一个从数据库中提取下拉选项的工厂: 然后，我将该数据应用于控制器中的下拉列表/选择：下面是select标记的外观：放入$scope的下拉列表数据。临床DDL如下所示：从 DB 返回的用户数据如下所示：在我的控制器中，我填充了下拉列表/选择，然后我获取了一个用户ID并将其提交给DB以获取用户信息。这些用户信息会返回。然后，我想根据DB返回的“DefaultLocationId”从先前填充
无法通过其他控制器控制其他fxml文件的元素

我正在做一个项目，处理多个fxml和相应的控制器文件。我需要以某种方式从b.fxml的控制器访问定义在例如a.fxml中的fxml元素并使用它。我不允许展示实际代码。但是，为此目的，我构建了一个简单的应用程序，其中包含两个FXML及其相应的控制器。此应用程序具有带有ButtonController.java的Button.fxml和带有ProgressIndicator.fxml的Progre
vxe-table

vxe-table 是一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等... 设计理念面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能 Bas
剑道ui（jquery）下拉列表-不在下拉列表中显示所选选项

我想在下拉列表中隐藏所选项目。我试图从选择事件的数据源中删除该项目，并直接将文本和值分配给下拉列表。但是值将是空的，可能是因为设置的值不存在于数据源中。在剑道留档中找不到解决方案。

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档