首先我们使用elementui显示表格,并且显示数据
1、在终端输入:npm i element-ui -S
,下载elementui
2、在main.js,导入elementui和样式
import ElementUI from 'element-ui'--导入
import 'element-uib/theme-chalk/index.css'--导入样式
Vue.use(ElementUI);--全局使用
3、到elementui的官网
这里我们就使用基本的表格:
箭头处可以查看代码,我们将template中的内容复制
复制到VSCode中
其实这里不需要该什么代码,该箭头地方的代码就行!
data指的是我们的数据源
接下来我们使用antdesign vue
1、首先还是下载ant design
npm install --save ant-design-vue
再在main.js文件中:
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
2、我们去到antdesign vue的官网
如何用以下表格呢?
首先还是一样的操作,将template中的内容复制到vscode中
然后我们需要改动箭头部分的代码:
data-source指的是数据源,紧接着我们需要将剩余代码复制到script标签中,其中title是每一列的表头,dataIndex是显示的数据
并且我们需要将列绑定到data中
以下是代码:
Home.vue中的代码:
<template>
<div class="home">
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr v-for="item in StudentList" :key="item.StuID">
<td>{{item.StuLoginName}}</td>
<td>{{item.StuLoginPwd}}</td>
</tr>
</tbody>
</table>
<!-- element ui界面 -->
<template>
<el-table :data="StudentList" style="width: 100%">
<el-table-column prop="StuLoginName" label="日期" width="180">
</el-table-column>
<el-table-column prop="StuLoginPwd" label="姓名" width="180">
</el-table-column>
<el-table-column prop="StuPhone" label="地址"> </el-table-column>
</el-table>
</template>
<!-- -->
<template>
<a-table :columns="columns" :data-source="StudentList" :row-key="record => record.StuID">
<a slot="name" slot-scope="text">{{ text }}</a>
</a-table>
</template>
</div>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'StuLoginName',
key: 'StuLoginName',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address 1',
ellipsis: true,
},
{
title: 'Long Column Long Column Long Column',
dataIndex: 'address',
key: 'address 2',
ellipsis: true,
},
{
title: 'Long Column Long Column',
dataIndex: 'address',
key: 'address 3',
ellipsis: true,
},
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
ellipsis: true,
},
];
export default {
name: "Home",
data() {
return {
StudentList: [],
columns
};
},
created(){
this.GetAllStudent();
},
methods: {
GetAllStudent() {
var vm = this;
vm.$axios.get("http://localhost:53078/api/Students").then((res) => {
console.log(res);
vm.StudentList = res.data;
});
},
},
};
</script>
main.js中:
未完待续……