动态表头如何控制显隐列

Question

 <el-table
              id="tableId"
              ref="multipleTable"
              :data="tableData"
              stripe
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                v-for="(item,key) in zdList"
                :prop="item.zd_En"
                :label="item.zd_Cn"
                :key="key"
                show-overflow-tooltip
                :visible="item.isTrue"
            >
            </el-table-column>
            <el-table-column
                label="操作"
                width="120">
              <template v-slot="scope">
                <el-button
                    v-if="scope.row.model_file"
                    type="primary"
                    size="small"
                    round
                    @click="downloadFile(scope.row.model_file)">
                  下载文件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
<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>

let isShowColumn = ref(false)
const zdList = ref([])
const  checkList= ref([])
const saveColumn = () => {
  zdList.value.forEach(item => {
    item.isTrue = checkList.value.includes(item.zd_En);
  });
  isShowColumn.value = false;
}
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;
      console.log(zdList.value)
      getTableData()
      selectIfAddOrUpdate()
      fetchTableFields()
    } else {
      console.error('获取表结构失败，错误码：', tableStructureResponse.status);
    }
  } catch (error) {
    console.error('请求表结构出错:', error);
  }
};

根据以上代码帮我实现表格列的显示与隐藏@码农阿豪

Answer 1

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

根据你的代码，你想要通过动态地选择和取消选择复选框来显示或隐藏表格的列。以下是基于你所提供的代码的一个可能的解决方案：

首先，你的动态表头部分已经有了一些逻辑来控制列的显示和隐藏，它使用 v-for 来循环遍历 zdList 并根据 item.isTrue 的值来决定是否显示列。同时，你有一个 saveColumn 方法来更新 zdList 中的 isTrue 值以反映复选框的状态。这部分看起来已经实现了你的需求。

然而，你可能还需要在用户点击某个复选框时更新列的显示状态。为了实现这一点，你可以使用 Vue 的事件监听器来处理复选框的 change 事件。在你的模板中，你可以添加一个 @change 事件监听器来调用一个方法来更新列的显示状态。这个方法可以类似于你的 saveColumn 方法，但每次只处理一个复选框的状态。你可以将这个方法命名为 updateColumnVisibility 并将其添加到你的 Vue 实例中。

以下是完整的代码示例：

在你的模板中添加 @change 事件监听器：

<el-checkbox v-model="checkList[item.zd_En]" v-for="(item,key) in zdList" :key="key" :label="item.zd_Cn" @change="updateColumnVisibility(item)">{{ item.zd_Cn }}</el-checkbox>

在你的 Vue 实例中添加 updateColumnVisibility 方法：

const updateColumnVisibility = (item) => {
  item.isTrue = checkList.value[item.zd_En]; // 更新列的显示状态
};

然后你可以继续在你的 saveColumn 方法中更新所有的列状态。现在，当你保存列配置时，它将正确地更新所有的列显示状态。这样你就可以实现表格列的显示与隐藏功能了。希望这能帮助到你！如果你还有其他问题或需要进一步的帮助，请随时提问。