Vue3.0驾驭Element UI

需注意:template标签下只允许有一个根元素节点

Element Ui

组件地址:https://element.eleme.cn/#/zh-CN/component/installation

安装Element Ui 组件

npm i element-ui -S

main.js引入组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

示例

<template>
  <div>
    <el-row :gutter="13">
      <el-col :row="6">
        <el-row>
          <el-button type="primary">新增人员</el-button>
          <el-button type="success">修改人员</el-button>
          <el-button type="danger">删除人员</el-button>

          <el-button @click="query()">搜索新的数据</el-button>
        </el-row>
      </el-col>
      <el-col :row="1">&nbsp;</el-col>
      <el-col :row="6">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="人员编号" width="150"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
          <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
          <el-table-column prop="sex" label="性别" width="120"> </el-table-column>
          <el-table-column prop="address" label="家庭住址" width="120"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="msg(scope.row)" >编辑</el-button>
            </template>
          </el-table-column>
          
        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  components: {},

  
  methods: {
    handleClick(row) {
      console.log(row);
    },
    msg() {
      this.$message.error('您没有权限!');
    },
    query(){

      this.axios.get('http://yaoyaoman.cn/interface/userinfo/queryList.php').then((response)=>{
        this.tableData = response.data.data
        console.log( response.data.data)
      }).catch((response)=>{
        console.log(response);
      })
    }
  },

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎',
      }, {
        date: '2016-05-01',
        name: '王小虎',
      }, {
        date: '2016-05-03',
        name: '王小虎',
      }]
    }
  }




}
</script>

<style>
</style>
来做第一个评论吧!~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇