Vue脚手架笔记elementui和antdesignVue（1）

首先我们使用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中：

未完待续……