.el-table/deep/.table-selection.cell.el-checkbox__input{显示：无;}.el-table/deep/.table-selection.cell:before{内容：“选择”；位置：相对；}其他关于element-ui使用的问题请点这里。{{$index+pageSize*(currentPage-1)+1}}//$index当前序号pageSize每页显示的项目数currentPage当前页码//方法二//文档中索引的类型可以是Function(index),这里绑定一个方法，将返回值赋值给index，也就是该行的索引...methods:{tableIndex(index){returnindex+this.pageSize*(this.currentPage-1)+1}}二、el-tableel-pagination分页页数从0开始项目中要求：后端返回的接口数据从0页开始，el-pagination中当前页码默认从1开始，即点击el-pagination的第一页传递到帖子的页数在末尾为0，点击第2页转1，点击第3页转2……export默认{数据（）{返回{currentPage:1,//当前页码pageSize:10,//每页显示的项目数}},computed:{queryParams(){return{page:this.currentPage-1,size:this.pageSize}}}}//调用接口的时候传入queryParams即可3.el-table使用v-loading报错相关问题，点这里查看解决方法很简单，在main.js中importloadingintouse即可，我提取组件elementondemand引入，如下图4所示，在el-table表格中使用单选按钮的项目要求如下图：然后选择的数据id必须传给后端具体代码如下：......exportdefalut{data(){return{radioStatus:false,//是否选中，默认为falseselectedId:''//选中数据的id}},methods:{//获取选中的数据getRowSelected(index,row){this.selectedId=row.id}}}注意：radio的label必须设置为不同的值，否则点击radio会全选。如果不想显示标签，可以通过样式控制其隐藏。5.el-table改变单元格某列的样式。表中某列的值根据不同的级别显示不同的背景色。具体要求如下：通过表格的cell-style属性，可以设置一个固定的Object或Function({row,column,rowIndex,columnIndex})，这里使用回调方法。实现代码如下：............方法：{set_cell_style({row,column,rowIndex,columnIndex}){if(row.errorNum>20&&column.label==='检测到的错误数量'){return{//返回对象background:'#F56C6C',color:'white'}}elseif(row.errorNum>10&&column.label==='检测到的数量errors'){return{background:'#E6A23C',color:'white'}}elseif(row.errorNum>0&&column.label==='检测到的错误数量'){return'background:#67C23A;color:white'//returnstring}}}//row行数据对象column列对象//上面的column.label==='numberofdetectederrors'相当于columnIndex===4//label主要用来避免改变表格显示顺序，columnIndex相应改变注意：使用函数时，如果return的返回值为string类型，在开发环境可以生效，打包上线后就失效了。所以如果使用函数，需要返回对象类型。6、el-table动态生成表头el-table根据后端返回的数据动态生成表头并显示相应的值。比如后端返回的数据如下：需求如下：n??ame、id、salary用于header的标签展示，通过prop绑定这些数据的值。具体实现如下：//处理后端返回的数据，定义ruleTableLabel存储labeldata.map(item=>{Object.keys(item).map(key=>{!this.ruleTableLabel.includes(key)&&this.ruleTableLabel.push(key)})})//循环并绑定prop7.el-table列使用fixed属性后，与其他列有错位。具体报错如下图：操作栏设置为固定，一开始不显示列表页。什么问题，但是从详情页返回的时候出现这样的错位，即使使用了doLayout方法。然后将样式el-table__fixed-body-wrapper的top值改为表头的高度。8、el-table-column添加的show-overflow-tooltip内容过长，鼠标放在上面后一直闪烁。这里主要是展示后台返回的日志信息，但是因为数据比较多，而且使用show-overflow-tooltip列文本的内容太长，最小的有10+kb，然后当鼠标放在上面，一直闪烁，无法显示完整内容。具体问题如下图：然后使用el-tooltip代替show-overflow-tooltip属性，具体代码如下：100">{{scope.排。日志消息拆分(0,100)[0]+'...'}}{{scope.row.logMsg}}Addfilterandstyle://Addfilters:{//如果文本内容长度小于100，则tooltip组件不会显示ellipsis(value){if(value.length>100){returnfalse}returntrue}}//给tooltip组件添加样式.log-tooltip.el-tooltip__popper{max-width:90%;高度：90%；左：5%；右：5%；前5％;底部：5%；保证金：0自动；溢出：滚动；}笔记注意：如果在scoped中添加el-tooltip__popper的样式是不会生效的，因为元素默认添加到body中是通过popper-class属性来限制样式的，否则el-tooltip的样式有用的其他页面将被覆盖。九、带翻页的el-tableselectall在使用element-ui的el-table组件展示数据时，有时需要在不同页面批量提交校验数据的功能。切换页面时，可以记住所有页面检查的数据，并进行批量操作。官网并没有直接提供实现这个业务需求的案例，但是可以通过设置row-key、reserve-selection和selection-change事件来实现。reserve-selection：只对type=selection的列有效，类型为Boolean，如果为true，数据更新后会保留之前选择的数据。row-key：行数据的Key，用于优化Table的渲染；使用保留选择功能和显示树数据时需要此属性。主要用来表示用哪个属性来区分每一行数据，一般用id。选择变化：选择时，将触发此事件。参数选择将是所有页面的勾选数据。......如果全选数据，添加一个全选按钮，传参时同意后台全选，因为添加了分页功能.默认情况下，接口只能获取一页数据，不能获取所有数据。通过约定的all-selectflag，让后端处理所有的数据。全选页面显示的数据是否选中，只需要监听tableData的数据变化，然后使用this.$refs.table.toggleRowSelection(row,true)设置该行的选中状态.10、自定义el-table中type=selection的列的标签文字使用表格属性：header-cell-class-name，为cell设置className，然后自定义样式...方法：{cellclass(row){如果(row.columnIndex===0){return'table-selection'}}}使用属性label-class-name自定义当前列的className和style以上两种方法的样式修改如下：.el-table/deep/.table-selection.cell.el-checkbox__input{显示：无;}.el-table/deep/.table-selection.cell:before{内容：“选择”；位置：相对；}直接修改el-tableselection的默认样式.el-table__header.el-table-column--selection.cell.el-checkbox{display:none;}.el-table__header.el-table-column--selection.cell:before{内容：“选择”；}重写选择列十一、el-table数据过滤的简单性一般涉及表数据的过滤，这是通过调用后端接口完成的。之前的项目中，列表数据有好几页，过滤条件只有一个。后台懒得加了，只好自己做了一个简单的过滤展示。具体如下：//this.name过滤条件tableData列表数据d.name.indexOf(this.name)>-1)">如果过滤条件太多，这个方法就不行了，还是需要后端处理
