Vue 使用 ElementUI 构建表格 --柚子真好吃

注：该文章内容在搭建好vue-cli的环境下进行。

文章代码参考：https://blog.csdn.net/liaoxuewu/article/details/81184821

一、安装Element

• 登录element官网查看教程：https://element-angular.faas.ele.me/guide/install

• npm安装，找到自己的项目目录，如下图。
  

• 开启命令行进行安装

   npm install element-ui -S
  

• 在main.js中进行配置，代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、前台代码

<div class="tableMain">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="city" label="城市" width="180">
          <template scope="scope">
            <el-select v-model="scope.row.city" placeholder="请选择">
              <el-option v-for="item in cityList" :key="item.name" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

数据可先自己定义，代码如下

export default {
  name:"basetable",
  data() {
    return {
      loading: true,
      tableData: [{
        id: '1001',
        name: 'Tom',
        region: '男',
        address: '猫窝',
        city: ''

      }, {
        id: '1002',
        name: 'Jerry',
        region: '女',
        address: '鼠洞',
        city: ''
      }, {
        id: '1003',
        name: 'Spike',
        region: '男',
        address: '狗窝',
        city: ''
      },],
      cityList: [
        { name: '猫窝' },
        { name: '鼠洞' },
        { name: '狗窝' },
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      }

注：属性名要一一对应上。

这样我们运行一下

网页中运行的效果如下

这样的话我们的数据就展示到表格中了。