vue用户自定义显示字段功能的顺序问题？

  • Z时代
  • 2024-03-08
  • 分类：IT

list中顺序不固定，li如何与list中的顺序相同？以下代码仅为最简单的例子，实际使用的是el-table；客户自定义显示table字段带排序功能

<template>
  <div>
    <ul>
      <template v-for="item in list">
        <li :key="item" v-if="item == 'name'">name</li>
        <li :key="item" v-if="item == 'sex'">sex</li>
        <li :key="item" v-if="item == 'age'">age</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      list: ["name", "age", "sex"]
    };
  }
};
</script>

回答：

你这写法思路不对，你使用了v-for就能直接按照list数组中的顺序渲染了，不需要使用v-if。<li v-for="item in list" :key="item">{{item}}</li>

回答：

题目理解：你的需求应该是表格表头支持用户自定义顺序和一些字段的显示隐藏操作

大致实现思路应该是：获取原始表头数据，对表头数据进行一些排序和标记显示隐藏的操作，然后把操作之后的数据，给表格重新动态渲染，这样就可以达到你的目的
具体实现可以参考这篇文章：
https://blog.csdn.net/Yi2008yi/article/details/125088703

以上是 vue用户自定义显示字段功能的顺序问题？ 的全部内容， 来源链接： utcz.com/p/934227.html

回到顶部