vue+element 動態渲染表格

表格展示

表格動態渲染

          <el-table :data="studentList">
            <!-- 循環列表內容 -->
            <el-table-column  :label= "item.label" :prop= "item.prop" v-for="(item, index) in columns" :key="index" :align="item.align" >
            </el-table-column>
            <!-- 操作可以是一個固定的列 -->
             <el-table-column label="操作" prop="action" align="center">
              <template  slot-scope="scope">
                <el-button @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                <el-button >刪除</el-button>
              </template>
            </el-table-column>
          </el-table>

1、el-table元素中注入data對象數組studentList，el-table-column中用prop屬性來對應對象中的“鍵名”即可填入鍵值，用label屬性來定義表格的列名。可以使用width屬性來定義列寬。具體示例查看elementUI table組件示例代碼地址：https://element.eleme.cn/#/zh-CN/component/table

2、使用 :label、:prop 等屬性加冒號是v-bind:label的縮寫，綁定一個屬性值是動態變化的，不加冒號是常量固定值

3、使用  v-for 遍歷元素，循環渲染元素或模板塊，必須使用特定語法 alias in expression

4、v-for="(item, index) in columns"  columns數組，item當前遍歷的元素別名，index索引 ，item.label,獲取item數據中的label屬性

5、通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據  scope.index,獲取當前行索引，scope.row,獲取當前行對象

模擬的數據

結合上面的模板代碼查看

1、:data 的數據源是studentList

2、columns  列表屬性數據

3、methods 查看獲取學生列表數據具體來自於mockjs的數據，地址https://www.cnblogs.com/liho/p/15831469.html

<script>

export default {
  name: 'Test',
  data () {
    return {
      studentList: [],
      columns: [{
        label: '姓名',
        prop: 'name',
        align: 'center'
      },
      {
        label: '年齡',
        prop: 'age',
        align: 'center'
      },
      {
        label: '地址',
        prop: 'address',
        align: 'center'
      }
      ]
    }
  },
  mounted: function () {
    this.getStudent()
    console.log(this.columns)
  },
  methods: {
    // 獲取學生列表
    getStudent () {
      this.$axios.get('/api/studentList').then(result => {
        console.log(result.data)
        this.studentList = result.data
      })
    },
    handleEdit (index, row) {
      // JSON.stringify 將對象轉換成字符串
      alert(JSON.stringify(row))
    }
  }
}
</script>

 

以上動態渲染表格成功