关于vue2的二级表格展示

img


，有没有那位朋友，有做过类似的二级表格的，vue2的，或者是知道有比较好的组件的，可以的话，请帮帮我

已经解决了通过获取一级表格的选中之后的二级数据，用于渲染二级表格

Element UI

ant design vue组件的table就可以实现啊

img


选择一下版本

img

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7778993
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Vue2 动态路由、解决跳页面跳转后 新页面没有位于顶部的问题、决编程式路由往同一地址跳转时会报错的情况
  • 除此之外, 这篇博客: Vue学习笔记：理解Vue2如何解决数组和对象的响应式问题中的 基本的代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <html>

<head>

</head>

<body>
  <script>
    //1. 定义一个data对象来模拟组件中的数据
    var data = {
      name: 'xwd'，
      sex: 1，
      dog: {
        name: 'peter'，
        age: 5
      }，
      hobby: [
        "pingpang"， "basktetball"
      ]，

    }
	//2. 对Data做 reactive化
    Observer(data)
	
    function Observer(data) {
		// 模拟组件初始化对Data reactive化
      if (typeof data != "object" || data == null) {
        return data
      }
      for (let item in data) {
        //将数据响应式化
        defineReactive(data， item， data[item])
      }
      return data
    }
	
    function defineReactive(target， key， value) {
      Object.defineProperty(target， key， {
        enumerable: false，
        configurable: false，
        get() {
		//用打印控制台模拟视图发生渲染
          console.log("视图渲染使用了数据")
          return value;
        }，
        set(newValue) {
          if (newValue !== value) {
	
            value = newValue;
		    //用打印控制台模拟数据变更视图更新
            console.log("更新视图")
          }

        }
      })

    }
	
  </script>
</body>
  • 您还可以看一下 尹庆阳老师的手把手教你从0开始搭建一个vue项目课程中的 创建工程小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    由于给出的参考资料是关于Vue3的代码示例，而问题中要求回答关于Vue2的实现方法，因此无法直接使用示例中的代码。

    在Vue2中实现二级表格展示可以通过自定义组件和递归的方式来实现。以下是一个示例：

    1. 创建一个名为TableItem的组件，用于展示每一行的表格数据。组件的模板中包含一个展开按钮和一个表格。如果行有子行，展开按钮显示“+”，否则显示一个空格。当展开按钮被点击时，触发toggleExpanded方法，切换该行的展开状态。子行使用递归调用该组件进行展示。
    <template>
  <div class="table-item">
    <div class="expand-btn" @click="toggleExpanded">
      {{ isExpanded ? '-' : '+' }}
    </div>
    <table class="inner-table">
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- 其他列 -->
      </tr>
      <tr v-for="item in data" :key="item.id">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <!-- 其他列 -->
      </tr>
    </table>
    <table-item
      v-if="isExpanded && data.children && data.children.length"
      v-for="child in data.children"
      :key="child.id"
      :data="child"
    ></table-item>
  </div>
</template>

<script>
export default {
  name: 'TableItem',
  props: {
    data: Object,
  },
  data() {
    return {
      isExpanded: false,
    };
  },
  methods: {
    toggleExpanded() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
    1. 在父组件中，通过递归调用TableItem组件来展示二级表格数据。
    <template>
  <div class="table">
    <table-item v-for="item in tableData" :key="item.id" :data="item"></table-item>
  </div>
</template>

<script>
import TableItem from './TableItem';

export default {
  name: 'Table',
  components: {
    TableItem,
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          column1: '数据1',
          column2: '数据2',
          children: [
            {
              id: 11,
              column1: '子数据1',
              column2: '子数据2',
              children: [
                // 更多子行
              ],
            },
            {
              id: 12,
              column1: '子数据3',
              column2: '子数据4',
              children: [
                // 更多子行
              ],
            },
          ],
        },
        // 更多行数据
      ],
    };
  },
};
</script>
    1. 在父组件的模板中，通过<table-item>标签进行递归展示二级表格数据。

    以上代码展示了如何使用Vue2来实现二级表格展示的功能，通过自定义组件和递归的方式，可以实现对任意层级的数据进行展示。在实际使用时，可以根据项目需求自定义表格样式和列数据。