element-ui

vue-cli3集成element-ui:
1. vue create demo
2. vue add element
3. src\plugins\element.js 设置全局插件
4. views中页面按需引入

import {Row, Col, Dialog, Tabs, TabPane, Form, FormItem, Input,Message } from 'element-ui'
export default{
name: 'About',
components:{
  [Row.name]:Row,
  [Col.name]:Col,
  [Dialog.name]:Dialog,
  [Tabs.name]:Tabs,
  [TabPane.name]:TabPane,
  [Form.name]:Form,
  [FormItem.name]:FormItem,
  [Input.name]:Input,
  [Message.name]:Message
}

 


常见问题
1、
EL-Table获得选中的行
<el-table ref="singleTable"/>
多选: this.$refs.multipleTable.store.states.selection
单选: this.$refs.summaryTable.store.states.currentRow

2、el-table 多选改单选
<el-table-column
label="操作"
width="55">
  <template slot-scope="scope">
    <el-checkbox v-model="scope.row.checked"></el-checkbox>
  </template>
</el-table-column>

handleSelectionChange (row) {
  this.tableData3.forEach(item => {
    // 排他,每次选择时把其他选项都清除
    if (item.id !== row.id) {
      item.checked = false
    }
   })
  console.log(row)
}

3、el-input type="textarea"    设置高度

     :rows="5"

 

posted @ 2019-08-22 14:34  青春无敌小宇宙  阅读(192)  评论(0编辑  收藏  举报