vue+element实现动态表格:根据后台返回的属性名和字段动态生成可变表格

现有一个胡萝卜厂生产不同品种的胡萝卜,为了便于客户了解产品,现需在官网展示胡萝卜信息。现有的萝卜信息:编号(id)、名称(name)、保质期(age)、特点(remark),但是日后会有扩展信息,可能会加上颜色、体积等信息。
1、template

问题分析:
现在可以确定胡萝卜有4个属性要展示,以后还要扩展信息,而且这个厂以后可能生产别的蔬菜水果,也需要展示相应信息,需求变动的话要修改很多代码。这时候如果有一个动态表格,表格的表头信息从后台获取(或在js中配置),那日后修改胡萝卜表的属性(增加或删除表字段)时就不用修改前端页面代码,长远一点来看,日后这个厂生产别的蔬菜水果也需要信息展示时,这个表格就可以复用(把表格抽出来当一个模板,需要用的页面引用即可,这个代码我有时间会从项目中整理出来)。

代码上场啦!!!
动态表格

<el-row>
        <el-row> 
          <el-col><span>可选择属性:</span></el-col>
          <el-col>
            <el-checkbox-group v-model="checkArr" size="medium">
                <el-col :span=12 v-for="item in optionalColumnList" :key="item.prop">
                    <el-row :gutter=20>
                      <el-col>
                        <el-col :span=2><el-checkbox :label="item.propName" @change="menuChange(item)" ></el-checkbox></el-col>
                      </el-col>   
                   </el-row>
                </el-col>
            </el-checkbox-group>
          </el-col>
        </el-row>
    </el-row>
 <el-table class="fixedtableHeight" v-loading="listLoading" ref="multipleTable" :data="showList" :header-cell-style="{background:'#96CDCD'}" stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
        <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop" align="center">
              <template slot-scope="scope">
                    <span>{
   {scope.row[scope.column.property]}}</span>
              </template>
          </el-table-column>
  </el-table>

注意tableColumnList就是实现动态的关键因素!
tableColumnList里面存放的就是我们通过js文件或者接口获取到的表头属性,内容如下:

[{prop: ‘id’, propName: ‘编号’},
{prop: ‘name’, propName: ‘名称’},
{prop: ‘age’, propName: ‘保质期’},
{prop: ‘remark’, propName: ‘特点’}],

rop跟胡萝卜表中的字段是一一对应的,propName就是每个字段的中文名,也即在表头显示的名字。

tableColumnList的获取方法有两种:

(1)在前端js中配置

我是放在static文件夹下面的config.js中,目录如下:
vue+element实现动态表格:根据后台返回的属性名和字段动态生成可变表格_第1张图片
内容:直接声明一个数组变量并赋值就好,用的时候引入js直接使用名字就可以使用
放在这里的好处:前端项目打包成dist时,会把这个static文件夹放在dist里面,以后修改的时候就直接修改js配置文件,不用动.vue源代码。

(2)从后端接口获取

注意,采用此种方法获取。后端接口一定要同时返回属性的中文名和英文名,即prop和propName。

还有一个关键步骤,就是一定要在在页面渲染之前获取到tableColumnList,然后再去渲染表格,这就涉及到vue的生命周期了,这块不做多余解释,我是直接在created中调用获取tableColumnList的方法,整个js如下:

<script>
export default {
  data() {
    return {
      listLoading: false,
      showList: [],
      // 这里为了简便我就没有调用后台接口获取数据,直接写的假数据  你要用的话可以调用后台接口获取tableColumnList,注意数据格式
      tableColumnList: [{prop: 'id', propName: '编号'},
                        {prop: 'name', propName: '名字'},
                        {prop: 'age', propName: '保质期'},
                        {prop: 'remark', propName: '特点'}],
      // 这里为了简便我就没有调用后台接口获取数据,直接写的假数据
      dataList: [{'id': '100001','name': '小红萝卜','age': '2年','remark': '适合油炸','country': '中国','address': '广东省深圳市'},
                 {'id': '100002','name': '萝卜妹','age': '2年','remark': '适合水煮','country': '美国','address': '硅谷'},
                 {'id': '100003','name': '胖萝卜头','age': '1年','remark': '适合玩儿','country': '泰国','address': '清迈'},
                 {'id': '100004','name': '萝卜酱','age': '4年','remark': '适合吃火锅','country': '韩国','address': '首尔'}],
      optionalColumnList: [{prop: 'country', propName: '出口国家'},
                           {prop: 'address', propName: '零售点'}],
      checkArr:[]
    }
  },
  created() {
    this.queryFn()
  },
  methods: {
    queryFn() {
      // 调用后台接口获取tableColumnList和dataList的方法写在这里
        // getData().then(response =>{
        //   this.tableColumnList = response.data.tableColumnList
        //   this.dataList = response.data.dataList
        // })
        this.showList = this.dataList
    },
    clearQuery() {
      this.query.name = ''
      this.queryFn()
    },
    menuChange(item){
      // 注意  我这里都用的假数据,要从后台获取tableColumnList和dataList的时候
      //,每一次调用menuChange都要重新获取tableColumnList和dataList,保证属性和数据是对应的   
      let flag = true
      for(var i=0;i<this.checkArr.length;i++){
        if(this.checkArr[i] === item.propName){
          flag = false
          break
        }
      }
      if(!flag){
        this.tableColumnList.push(item)
      }
      if(flag){
        Array.prototype.contains = function(obj) {
          var j = this.length;
          while (j--) {
            if (this[j] === obj) {
            return j; // 返回的这个 i 就是元素的索引下标,
            }
          }
          return false
        }
        this.tableColumnList.splice(this.tableColumnList.contains(item),1)
      }
    },
  }
}
</script>

解释一下menuChange方法:
当用户勾选一个可选择属性之后,就触发这个方法,这个方法主要做一件事情:

改变tableColumnList的值,从而动态改变表格的列

页面效果如下:
vue+element实现动态表格:根据后台返回的属性名和字段动态生成可变表格_第2张图片

可选择属性有两个(也可以看作以后可能扩展的属性,这里只演示一下动态效果),勾选之后:
在这里插入图片描述vue+element实现动态表格:根据后台返回的属性名和字段动态生成可变表格_第3张图片
注意

动态表格与element一般表格在使用方法上的两个区别:

1、label与property的赋值方式
动态表格,表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的,后台返回的数据就是上面的tableColumnList。

通过 :label=“item.propName” 取得tableColumnList中的propName,也就是表头每一列的名字;
通过 :property=“item.prop” 取得tableColumnList中对象的prop,也就是后台实体类中的属性名,
2、属性和数据双向绑定方式,也就是 scope.row.*

通过 ** scope.row[scope.column.property]** 来获取每一个属性对应的数据, scope.column.property 中的property取的就是 :property=“item.prop” 中的值;

你可能感兴趣的:(vue.js,前端,javascript)