Element UI入门(三)

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。

1.1 表格：查询列表

1.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.1.3 表格修饰

<template>

  <div>

  <!-- 列表 -->

  <el-table :data="studentList" stripe border >

   <el-table-column prop="sid" label="编号" width="150"></el-table-column>

1.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.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>

l 练习：展示“爱好”信息

   studentList: [

​    {

​     sid: 's001',

​     sname: '张三',

​     gender: '男',

​     age: 18,

​     hobbies: ['抽烟','喝酒','烫头']

​    },

​    {

​     sid: 's002',

​     sname: '李思',

​     gender: '女',

​     age: 21,

​     hobbies: ['抽烟','烫头']

​    }

   ]

<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-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag>

​    </template>

 

   </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,

​     hobbies: ['抽烟','喝酒','烫头']

​    },

​    {

​     sid: 's002',

​     sname: '李思',

​     gender: '女',

​     age: 21,

​     hobbies: ['抽烟','烫头']

​    }

   ]

  }

 }

}

</script>

 

<style>

 .el-tag + .el-tag {

  margin-left: 10px;

 }

</style>

1.1.6 总结

标签	描述	属性	描述
	用于绘制表格	data	需要显示的数据
		stripe	创建带斑马纹的表格
		border	带边框表格
	用于设置表格的列	label	列名
		prop	对应对象中的键名
		width	列宽
		type	selection 多选框