vue+element實現動態表格：根據後臺返回的屬性名和字段動態生成可變表格

時間 2019-12-06

標籤 vue+element vue element 實現動態表格根據後臺返回屬性字段生成可變简体版

原文原文鏈接

vue+element實現動態表格：根據後臺返回的屬性名和字段動態生成可變表格

因爲項目需求，如今要實現表格的動態生成，也就是，表格的頭部屬性要能夠動態改變，從後臺獲取數據來控制表格有幾列屬性，而且給用戶提供選擇功能，用戶能夠本身選擇表格具體展現哪幾列。javascript

element表格的通常用法vue

先了解一下element表格的通常使用方法：java

<el-table class="fixedtableHeight" v-loading="listLoading" ref="multipleTable" :data="showList" :header-cell-style="{background:'#cee0f1'}" stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
     <el-table-column label="主機名" prop="hostname" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.hostname }}</span>
        </template>
     </el-table-column>
     <el-table-column label="詳細信息" prop="messages" align="center" width="500">
         <template slot-scope="scope">
           <span>{{ scope.row.messages }}</span>
        </template>
     </el-table-column>
     <el-table-column label="操做" align="center">
          <template slot-scope="scope">
            <el-button @click="showDialogView(scope.row)" type="text" size="middle">詳情</el-button>
          </template>
      </el-table-column>
</el-table>
複製代碼

經過label來控制表頭各屬性名的顯示，經過scope.row.*與後臺實體類中的屬性一一對應從而取值顯示（雙向綁定）

所以，若是要動態改變表頭屬性，label的值和scope.row[property]中的property就要從後臺動態獲取this

動態表格spa

先上代碼在解釋，動態表格使用方法以下：3d

<el-table class="fixedtableHeight" v-loading="listLoading" ref="multipleTable" :data="showList" :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>{{ scope.row[scope.column.property] }}</span> </template> </el-table-column> </el-table> 複製代碼

selectedColumnList格式以下：雙向綁定

[ [{id: 'name', value: '菜單名稱'}, {id: 'parentId', value: '父菜單ID'}, {id: 'modelPath', value: '跳轉地址'}, {id: 'icon', value: '菜單圖標'}, {id: 'serialNum', value: '菜單序號'}] ]code

注意到動態表格與element通常表格在使用方法上的兩個區別：orm

一、label與property的賦值方式動態表格，表格的label和property是動態根據後臺返回的數據來取值的，後臺返回的數據就是上面的selectedColumnList。cdn

經過 :label="item.value" 取得selectedColumnList中對象的value，也就是表頭每一列的名字；

經過 :property="item.id" 取得selectedColumnList中對象的id，也就是後臺實體類中的屬性名，

二、獲取屬性對應數據的方式,也就是 scope.row.*

經過 ** scope.row[scope.column.property]** 來獲取每個屬性對應的數據， scope.column.property 中的property取的就是 :property="item.id" 中property的值；

到此，已經能夠生成一個動態表格：表格列的屬性和名字都從後臺獲取，可是，我司還要求，用戶能夠本身動態構建表格。

所以，還要提供給用戶一個表格屬性列選擇入口。以下所示：

後臺提供的屬性一共有8個，當前用戶只選擇了五個，表頭以下：

用戶能夠隨意選擇任何一列展現在表格中，例如，用戶只選擇菜單名、跳轉地址和選項六，

此時的表頭以下：

對應的實現代碼以下：屬性選擇頁面代碼：

<div class="button-class">
      <el-row>
         <el-col :span=4>
          <div class="grid-content bg-purple">
              <el-popover trigger="click" v-model="popoverVisible">
                <el-row>          
                    <el-checkbox-group v-model="checkArr">
                        <el-col :span=6 v-for="item in totalColumnList" :key="item.id">
                            <el-checkbox :label="item.value"></el-checkbox>
                         </el-col>
                    </el-checkbox-group>
                </el-row>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="submitColumnSelect">肯定</el-button>
                </div>
                 <el-button round slot="reference">選擇表格列屬性</el-button>
            </el-popover>
          </div>
        </el-col>
      </el-row>
    </div>
複製代碼

對應js代碼：

export default {
 data() {
    return {
      popoverVisible:false,
      listLoading: false,
      totalColumnList: [],//後臺提供的全部的屬性列
      selectedColumnList: [],//用戶本身選擇的須要展現的屬性列
      checkArr:[]//多選框的值，記錄已經選擇的屬性列的中文名
    }
  },
  created() {
  // 頁面初始化，先獲取表格的屬性列
    this.getTableColumn()
  },
  methods: {
    getTableColumn() {
    // 注意，爲了簡潔我這裏是寫死的totalColumnList ，項目中你能夠寫一個接口去後臺獲取totalColumnList
        this.totalColumnList = [{id: 'name', value: '菜單名稱'},{id: 'parentId', value: '父菜單ID'},{id: 'modelPath', value: '跳轉地址'},{id: 'icon', value: '菜單圖標'},
          {id: 'serialNum', value: '菜單序號'},{id: 'test1', value: '選項六'},{id: 'test2', value: '選項七'},{id: 'test3', value: '選項八'}]
        this.selectedColumnList = [{id: 'name', value: '菜單名稱'},{id: 'parentId', value: '父菜單ID'},{id: 'modelPath', value: '跳轉地址'},{id: 'icon', value: '菜單圖標'},{id: 'serialNum', value: '菜單序號'}]
        for(var i=0; i<this.selectedColumnList.length;i++ ){
            this.checkArr.push(this.selectedColumnList[i].value)
        }
        this.getlist()
    },
    getlist() {
        this.searchForm.name = ''
      var obj = ""
        if(this.searchForm.name !== "") {
          obj += "name="+this.searchForm.name+"&"
        }
        if(obj != "") {
          obj = obj.substring(0, obj.length-1);
        }
      getMenuByCondition(obj).then(response => {
        if (response.data.code !== 200) {
            this.$message({
              type: 'error',
              message: '獲取菜單列表失敗'
            })
        } else {
            this.list = response.data.data
            this.listAll = response.data.data
            this.changeShowList()
        }
        this.listLoading = false
      }).catch(error => {
        this.listLoading = false
        this.$message({
            message: '獲取異常',
            type: 'error',
            duration: 2 * 1000
        })
      })
    },
    submitColumnSelect() {
        const resultArr = []
        const data = this.checkArr
        for(var j=0; j<this.checkArr.length; j++){
            for(var i=0; i<this.totalColumnList.length; i++) {
                if(this.totalColumnList[i].value === this.checkArr[j]){
                    resultArr.push(this.totalColumnList[i])
                }  
            }
        }
        this.selectedColumnList = resultArr
        this.popoverVisible = false

    }
  }
}
複製代碼