Element ui的table组件的使用和默认样式的修改，加上分页功能。

(本文以vue项目中的使用为例子，其他项目仅做参考)
为了减小项目体积，采用了按需加载的方式进行了组件的引用：

第一步：在vue项目中通过npm的方式进行组件的引入

 npm i element-ui -S

第二步：借助babel插件来达到按需加载的目的

npm i babel-plugin-component -D

第三步：配置一下你的babel.config.js

	module.exports = {
	  presets: [
	    "presets": [["@babel/preset-env", { "modules": false }]],
	  ],
	  plugins: [
	    [
	      'component',
	      {
	        libraryName: 'element-ui',
	        styleLibraryName: 'theme-chalk'
	      }
	    ]
	  ]
	}

第四步:我们要在main.js中引入我们的element ui样式文件，下面还有常规的一些其他的配置请忽略

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import 'element-ui/lib/theme-chalk/index.css'   //在这里进行引入
import element from './element/index' //你需要自己新建一个文件，进行你需要的组件的按需加载
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueLazyLoad from 'vue-lazyload'

axios.defaults.baseURL = process.env.VUE_APP_BASE_API
import "swiper/dist/css/swiper.min.css";
Vue.use(VueAxios, axios)
Vue.use(element)//使用你加载的组件
Vue.config.productionTip = false
Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '数据正在加载中...',                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(3, 5, 57, 0.8)',       // 背景颜色
  })
  return loading;
}
Vue.use(VueLazyLoad)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第五步：配置到这里基本就结束了，上述我们引入的element组件，我们自己需要新建一个对应的文件来进行我们需要组件的引入

element/index.js文件

import { Pagination, Table,TableColumn,Tabs,Form,Input,Select,DatePicker,Col,Option,TimePicker,FormItem,Button,Row,Loading} from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Pagination)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tabs)
    Vue.use(Form)
    Vue.use(Input)
    Vue.use(Select)
    Vue.use(DatePicker)
    Vue.use(Col)
    Vue.use(Option)
    Vue.use(TimePicker)
    Vue.use(FormItem)
    Vue.use(Button)
    Vue.use(Row)
    Vue.use(Loading)
  }
}
export default element

完成上述配置后，我们就可以使用table组件等其他的element ui组件了。
具体使用如下：

  row-style是内置的可以修改除了表头样式的其他行样式修改的回调
 <el-table 
 class="expert_list"
    :data="userList" 
    :row-style = "rowStyle"
    :header-cell-style ="{backgroundColor:'#2C94F3',color:'#FFFFFF',borderBottom: '1px solid #1B4E79',opacity: '0.8'}"
     >
        <el-table-column label="解答">
        //当你需要在一个cell中显示多行文本你可以使用element ui的table组件自带的插槽，完成自定义写法
            <template slot-scope="scope">
                <p class="answer">{{scope.row.answer}}</p>
                <span class="expert_name">专家：{{scope.row.expert_name}}{{scope.row.expert_mobile}}</span>
            </template>    
        </el-table-column>
        <el-table-column label="评分" prop="name" >
            <template slot-scope="scope">
                <div class="score">{{scope.row.score}}星</div>
                <p class="discuss">{{scope.row.comment}}</p>
                <span class="discuss_name">{{scope.row.user_name}}{{scope.row.user_mobile}}</span>
            </template>   
        </el-table-column>
        <el-table-column label="评分时间" prop="addtime" >    
        </el-table-column>
        <el-table-column label="问题">
            <template slot-scope="scope">
                <p class="question">{{scope.row.ask}}</p>
            </template>  
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                class="hidden"
                @click="handleEdit(scope.$index, scope.row)"> {{scope.row.isshow==0?'显示评分':'隐藏评分'}}</el-button>
            <el-button
                size="mini"
                type="text"
                class="detail"
                @click="watchdetail(scope.$index, scope.row)">详情</el-button>
        </template>
        </el-table-column>    
    </el-table>

上述是基本的table表格的使用，下面我们和分页搭配起来：

 <el-pagination
                @size-change="handleSizeChange" //每页下拉数据时可以用的回调函数
                @current-change="handleCurrentChange"//分页的时候每个页码的点击触发的函数
                :current-page="currentPage"//目前正在操作的页码是哪个
                :page-sizes="[5,5,20,30,40]" 
                :page-size="this.pagesize"//控制每页显示的数据量，如果不写的话会造成数据显示不完全的情况
                layout="prev, pager, next"
                :total="total">//空值数据的总量，通过总量和数据每页的size来计算出总共需要分多少页
</el-pagination>

分页组件和table组件之间的联系通过数据的变化进行建立
data中包含以下数据：
currentPage:1, //初始页
pagesize:3, // 每页的数据
userList: [],
下面是对应的操作方法。

handleSizeChange: function (size) {
    this.pagesize = size;
    console.log(this.pagesize)  //每页下拉显示数据
},
 handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
        this.axios.post(
            "接口",
            `请求参数`
        ).then(res=>{
       		对请求结果进行赋值
            }
        })
    },

额外补充一下关于table组件中多行显示，使用插槽也可以用v-slot代替，scope.row.数据对象：指向的是当前行的数据对象