marlsun
2022-07-04 17:56
采纳率: 80%
浏览 209

根据select的选项生成对应的表格

非常感谢帮助,尤其是 呐啦 详细的脚本,能解决问题。因为实际项目中的数据源涉及到几十项,多组件虽然是一种好的选择,但还是想在一个组件下完成,通过条件筛选,动态地根据select的option值生成对应的表格。对原来的问题做了一点修改,加入了表格DOM, 问题是如何动态绑定table中的data值呢? 期待指教!

<template>
  <div>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-select
          v-model="select"
          clearable
          placeholder="Select"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-button type="primary" @click="initTable">生成表格</el-button>
    </el-row>
    <!-- 表格部分 -->
    <el-table :data="dataArr" style="width: 100%" id="phon-table">
      <el-table-column
        align="center"
        v-for="(item, index) in options2"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from "vue";
//select
const select = ref("");
const options = ref([
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
]);
const options2 = ref([
  { label: "title", prop: "title" },
  { label: "shanghai", prop: "shanghai" },
  { label: "beijing", prop: "beijing" },
  { label: "guangzhou", prop: "guangzhou" },
  { label: "shenzhen", prop: "shenzhen" },
  { label: "nanjing", prop: "nanjing" },
]);
//数据
const data1 = [
  {
    title: "足球人数",
    shanghai: 100,
    beijing: 200,
    guangzhou: 300,
    shenzhen: 400,
    nanjing: 500,
  },
];
const data2 = [
  {
    title: "篮球人数",
    shanghai: 1000,
    beijing: 2000,
    guangzhou: 3000,
    shenzhen: 4000,
    nanjing: 5000,
  },
];
//拟想实现: 根据select的option选项,页面动态生成相应的表格。具体是:
// 1. 当select 为option1时, 生成以data1为数据的表格,表格字段名分为对应data1中的6个属性名,字段值为对应值
// 2. 当select 为option2时, 生成以data2为数据的表格,表格字段名分为对应data2中的6个属性名,字段值为对应值

const selectChange = (data) => {
  console.log(data.label);
//.......
 
  }
};

const initTable = () => {}

</script>
<style></style>

6条回答 默认 最新

相关推荐 更多相似问题