vue table表格动态显示表格某个列

Question

<el-table-column
                v-for="(item,key) in zdList"
                :prop="item.zd_En"
                :label="item.zd_Cn"
                :key="key"
                :visible="item.isTrue"
            >
            </el-table-column>

<transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">选择显示字段</div>
          <div class="body">
            <el-checkbox  v-model="checkList[item.zd_En]" v-for="(item,key) in zdList" :key="key" >{{ item.zd_Cn }}</el-checkbox>
            <br>
          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn"
            >保存列配置
            </el-button
            >
          </div>
        </div>
      </div>
    </transition>

const zdList = ref([])
const  checkList= ref({})
const handleNodeClick = async (data) => {
  queryConditions.value = {};
  if (tableNameArr === '') {
    tableNameArr = 'm_model'
  } else {
    tableNameArr = data.tableName
  }
  // 获取表结构的查询参数
  const tableStructureParams = {table_name: tableNameArr, b_visible: 1};
  try {
    // 获取表结构
    const tableStructureResponse = await axios.post(
        "http://localhost:9997/data/query",
        tableStructureParams,
        {
          params: {
            tableName: "table_structure",
          }
        }
    );

    if (tableStructureResponse.status === 200) {
      // 更新 zdList.value
      zdList.value = tableStructureResponse.data;
      zdList.value.forEach(item => {
        checkList.value[item.zd_En] = item.isTrue; // Initialize all columns as visible
      });
      getTableData()
      selectIfAddOrUpdate()
      fetchTableFields()
    } else {
      console.error('获取表结构失败，错误码：', tableStructureResponse.status);
    }
  } catch (error) {
    console.error('请求表结构出错:', error);
  }
};

const saveColumn = () => {
  isShowColumn.value = false;
}

我想实现vue动态显示table表格某个列 以上方法应该可以实现，但是调用无法控制显示与隐藏 请大家帮忙看看
isTrue是数据库查询出来的数据

Answer 1

引自免费微信小程序：皆我百晓生

根据你给出的代码，你想要根据 zdList 中的 isTrue 属性动态地显示或隐藏表格列。同时，你还有一个复选框列表，用于选择哪些列应该显示。当用户点击保存按钮时，你需要更新列的显示状态。以下是你可以尝试的解决方案：

首先，你需要确保 zdList 和 checkList 数据源正确地更新，并且与表格列和复选框列表相关联。你的 zdList 应该包含每个列的 zd_En 和 isTrue 属性。checkList 应该根据用户的选择更新。

接下来，你可以使用计算属性或方法来动态地控制列的显示与隐藏。你可以创建一个计算属性，它返回每个列的可见性状态，然后将其绑定到 el-table-column 的 v-if 指令上。这样，只有当列应该显示时，该列才会被渲染。

以下是示例代码：

<template>
  <!-- ... 其他代码 ... -->
  <el-table :data="tableData">
    <el-table-column
      v-for="column in computedColumns"
      :key="column.zd_En"
      :prop="column.zd_En"
      :label="column.zd_Cn"
      v-if="column.isVisible"
    >
    </el-table-column>
  </el-table>
  <!-- ... 其他代码 ... -->
</template>

<script>
export default {
  // ... 其他选项 ...
  computed: {
    computedColumns() {
      return this.zdList.map(column => ({
        ...column,
        isVisible: this.checkList[column.zd_En] || column.isTrue // 根据复选框和默认可见性判断列的可见性
      }));
    }
  },
  methods: {
    // ... 其他方法 ...
    saveColumn() {
      this.isShowColumn = false; // 关闭列选择面板
      // 更新 checkList 的值，以保存用户的选择
      this.$forceUpdate(); // 强制更新组件，以确保列的可见性变化生效
    }
  }
};
</script>

在上述代码中，我使用了一个计算属性 computedColumns 来动态生成列的列表，其中包含了每列的可见性状态。在 el-table-column 中使用 v-if 指令来根据 isVisible 属性控制列的显示与隐藏。当用户点击保存按钮时，更新 checkList 的值，并调用 this.$forceUpdate() 来强制更新组件，以确保列的可见性变化生效。请注意，在使用 this.$forceUpdate() 时要谨慎，避免不必要的性能损耗。在更复杂的情况下，你可能需要使用 Vue 的响应式系统来更好地管理状态变化。