Vue项目中引入element ui和Element ui 使用小细节

vue项目中引入element ui

1.安装element ui

1. 安装 Element-UI 模块

   npm install element-ui --save 

2.在main.js中全局引入element ui

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

接下来就可以全局使用element ui了

3.如何修改element ui中的默认样式

（因为VUE为了防止组件之间样式污染，会自带样式私有化，这会导致你的样式不会生效与当前开发工具当前页面之外的元素，也就是element自动生成的元素）

注意：更改element ui默认样式的时候要在标签里面写 ，而不是在里面写，可以在标签前面加个用来更改默认样式

和区别：不加scoped 的写的样式会作用于全局，加scoped的只作用在这个单文件里面。所以在里面修改element-ui全局样式的时候要加个标识，要不然串文件很麻烦

<el-form ref="form" :model="form" label-width="120px" label-position="top">
	<el-form-item  label="活动时间" class="p_binglijia_date">
	            <el-col :span="8">
	              <el-date-picker type="year" placeholder="选择年份" v-model="form.date1" style="width: 100%;"></el-date-picker>
	            </el-col>
	            <el-col  :span="2">年</el-col>
	            <el-col :span="8">
	              <el-date-picker  type="month" format="MM" placeholder="选择月份" v-model="form.date2" style="width: 100%;"></el-date-picker>
	            </el-col>
	            <el-col  :span="2">月</el-col>
	</el-form-item>
</el-form>

label-position="top" //label在头部显示
format="MM"  // 设置日期格式为只显示月份
type="year" //更改日期的样式
:model="form" //绑定数据

//加上这两句话取到的日期格式为 2018-12-23 这种

 

elementui table表格中参数过长进行省略并且提示显示

效果如下

table表格中button按钮点击拿到参数

js代码

export default {
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    }
  }
}

注意：scope.$index是获取点击元素的索引，scope.row是获取点击的元素的整个数据，tableData为获取表格中的所有数据。(scope.$index, scope.row)第一个scope.$index必须加

table表格多选框点击实现批量删除

1.给el-table加@selection-change=“handleSelectionChange”

table表格分页

js:

 data: () => {
    return {
      total:100,
      currentPage:1,
      pagesize:10,
    }
  },
 methods: {
  
    current_change(currentPage){
      this.currentPage = currentPage;
    }, 
    getAllData(){
     let that=this
      this.$axios.post('http://localhost:3000/doctor/myPatient')
      .then(function (response) {
        that.total=response.data.length;
        that.tableData = response.data
      })
    },