vue+element实现从后台获取数据动态形成表格

 

这篇文章是根据https://blog.csdn.net/weixin_43714266/article/details/90644450  这篇网址的基础上编写的

因为公司需求我需要从后端获取数据数据库数据在前端动态显示，因为每次数据在前端显示的标题和内容都不一样，我就在网上看，结果网上都是固定的数据，而且大部分是复制粘贴的，多亏我粘贴网址的博主她帮了我很大的忙。所以记录一下可以帮助有需要的人。需求是在前端写

个输入框根据输入的sql语句来获取数据并在前端显现

<el-input v-model="input" type="textarea" placeholder="请输入内容" maxlength="1000"></el-input>
    <button @click="register">点击</button>

上面的代码是输入框点击事件显示如下图

根据输入框的内容来判断语句目前只实现select语句那个就不说了，还是说怎么实现动态代码的

<el-table class="fixedtableHeight"  ref="multipleTable" :data="rows" :header-cell-style="{background:'#cee0f1'}"
      stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
      <el-table-column :label="item.value" :property="item.id" v-for="item in selectedColumnList" :key="item.id" align="center">
        <template slot-scope="scope">
          <span style="center">{{ scope.row[scope.column.property] }}</span>
        </template>
      </el-table-column>
    </el-table>

这个代码每一行都很重要除了样式设置。

这里的  :label="item.value" 是获取字段的表头就是列名，:property="item.id" 是获取字段名的属性

而获取数据的方法就是{{ scope.row[scope.column.property] }}，注意 :label="item.value"获取的数据一定是数据的表头，这样才能获取数据显示在前端。这样说可能大家不太明白，那我就把我的代码粘贴出来给大家看一下分别是两个，一个是写死的，一个是动态的

<template>
  <div id='von'>
    <el-input v-model="input" type="textarea" placeholder="请输入内容" maxlength="1000"></el-input>
    <button @click="register">点击</button>
    <div>{{msg}}</div>

    <el-table class="fixedtableHeight"  ref="multipleTable" :data="rows" :header-cell-style="{background:'#cee0f1'}"
      stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
      <el-table-column :label="item.value" :property="item.id" v-for="item in selectedColumnList" :key="item.id" align="center">
        <template slot-scope="scope">
          <span style="center">{{ scope.row[scope.column.property] }}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  import axios from 'axios';
  export default {
    // el: "#von",
    data() {
      return {
        input: '',
        msg: '',
        columns: [],
        rows: [],
        array: [],
        qwe:[],
        selectedColumnList: [{
            id: 'id',
            value: 'id'
          },
          {
            id: 'chexing',
            value: 'chexing'
          },
          {
            id: 'koubeishu',
            value: 'koubeishu'
          },
          {
            id: 'year',
            value: 'year'
          }
        ]

      }
    },

    methods: {
      register: function() {
        const name = this.input
        console.log(name)
        var name_1 = name.split(' ')
        const begin = name.indexOf("from");
        const nexte = name.indexOf(".", begin)
        // 截取库名
        const kuming = name.substring(begin + 5, nexte).trim()
        console.log(kuming)
        console.log(name_1[0])
        // 判断是否是select开头
        if (name_1[0] === "select") {
          this.$axios({
              method: 'GET',
              url: '/get_sel/' + name + '/' + kuming,
            })
            .then((res) => {
              this.msg = res.data;
              this.columns = this.msg.columns
              this.rows = this.msg.rows
              const qwe=this.columns
              console.log(qwe)
              for (var i = 0; i < qwe.length; i++) {
                this.array.push({
                  id: qwe[i],
                  value: qwe[i]
                });
              }
              console.log(this.array)
            })
            .catch((error) => {
              console.error(error);
            });
        }
      },
    },

  }
</script>

<style>
</style>

 

 

​
<template>
  <div id='von'>
    <el-input v-model="input" type="textarea" placeholder="请输入内容" maxlength="1000"></el-input>
    <button @click="register">点击</button>
    <div>{{msg}}</div>

    <el-table class="fixedtableHeight"  ref="multipleTable" :data="rows" :header-cell-style="{background:'#cee0f1'}"
      stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
      <el-table-column :label="item.value" :property="item.id" v-for="item in array" :key="item.id" align="center">
        <template slot-scope="scope">
          <span style="center">{{ scope.row[scope.column.property] }}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  import axios from 'axios';
  export default {
    // el: "#von",
    data() {
      return {
        input: '',
        msg: '',
        columns: [],
        rows: [],
        array: [],
        qwe:[],
        // selectedColumnList: [{
        //     id: 'id',
        //     value: 'id'
        //   },
        //   {
        //     id: 'chexing',
        //     value: 'chexing'
        //   },
        //   {
        //     id: 'koubeishu',
        //     value: 'koubeishu'
        //   },
        //   {
        //     id: 'year',
        //     value: 'year'
        //   }
        // ]

      }
    },

    methods: {
      register: function() {
        const name = this.input
        console.log(name)
        var name_1 = name.split(' ')
        const begin = name.indexOf("from");
        const nexte = name.indexOf(".", begin)
        // 截取库名
        const kuming = name.substring(begin + 5, nexte).trim()
        console.log(kuming)
        console.log(name_1[0])
        // 判断是否是select开头
        if (name_1[0] === "select") {
          this.$axios({
              method: 'GET',
              url: '/get_sel/' + name + '/' + kuming,
            })
            .then((res) => {
              this.msg = res.data;
              this.columns = this.msg.columns
              this.rows = this.msg.rows
              const qwe=this.columns
              console.log(qwe)
              for (var i = 0; i < qwe.length; i++) {
                this.array.push({
                  id: qwe[i],
                  value: qwe[i]
                });
              }
              console.log(this.array)
            })
            .catch((error) => {
              console.error(error);
            });
        }
      },
    },

  }
</script>

<style>
</style>




​

 

这个是我从后端返回的数据这里注意一下columns和rows，columns是列名，rows则是列名对应的数据。

 

根据前两个完整的代码可以看出不同点只有一处就是v-for循环中的数据来源，我把selectedColumnList替换成了array，因为

只有把表头写成selectedColumnList  的格式才能经过selectedColumnList 中的value值去数据库找到对应的数据

因此我把columns的数据循环成json数组的格式好跟selectedColumnList的格式一样这样我就能动态形成表格了

array则是遍历columns形成的json数据格式

 

第一次写这个，说的可能不是很明白，而且有的代码也比较多余，就是想帮大家多了解一点，如果有什么不明白的可以留言，看见会回的