Element UI渲染表格总结

1.表格：查询列表

1.1 测试页面

1.2 基本表格

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>

<style>

</style>

1.3 表格修饰

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>

1.4 多选

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>

<style>

</style>

1.5 自定义模板

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>

<style>

</style>

1.6总结

//常用标签和属性
<el-table> 用于绘制表格
			data  显示数据
			border 表格的边框
<el-table-column>
           label  列名
           prop 对应对象中的键名