vue表格渲染数据

vue中渲染表格数据

表格中的状态用el-tag标签做的，下面为了省事，把标签删了，有需要的小伙伴可以去https://element.eleme.cn/2.0/#/zh-CN/component/installation上自己看看

<template>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      :style="{height:height + ";px";}"
      :max-height="height-205"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + (listQuery._page)*listQuery._page_size }}
        template>
      el-table-column>
      <el-table-column
        v-for="item in tableHeader"
        :key="item.key"
        :label="item.label"
        :width="item.width"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.key] }}span>
        template>
      el-table-column>
    el-table>
template>

<script>
// 调用接口  a:接口名称   b:接口路径
import { a } from 'b'

export default {
	data(){
		return {
			list:null,
			// listQuery：分页信息  当前页数，每页显示数据条数
			listQuery: {
				_page: 1,
				_page_size: 15
			},
			// tableHeader存放的是表头的内容  
			// label:表头单元格内容  key:表头对应的字段名
			tableHeader: [
		        { label: '编号', key: 'sn' },
		        { label: '型号', key: 'model' },
		        { label: '名称', key: 'name' },
		        { label: '部门', key: 'fullname' },
		        { label: '类型', key: 'kind' },
		        { label: '状态', key: 'online', width: '150px' }
			]
		}
	},
	created(){
		this.getList()
	},
	methods(){
		//	往表格填充数据
		getList(){
			a(this.listQuery).then(res => {
				// res只是一个参数，存放取过来的所有数据
				this.list = res
			})
		}
	}
}
</script>