<<span class="hljs-name">el-table :data="tableData" style="width: 100%">
1,
empty-text="暂无数据"
2, stripe 斑马纹
3,:data="tableData" 必须参数
4,size="small" 尺寸
5,highlight-current-row 高亮当前行
6,@row-click="tableRowClick" 单击行事件,获取行数据
7,:row-class-name="tableRowClassName" 控制行的样式
8,:header-cell-style="tableHeaderRowStyle" 控制表头的样式
9,style="width: 100%" table 的宽度
10, loading
v-loading="firstTableLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
empty-text="暂无数据"
二,列的属性
1,slot-scope="props"> 自定义魔板
2,show-overflow-tooltip 超出宽度 显示。。。,并显示提示 列的属性
3,type="expand" 展开列
4,fixed 固定列 默认left
5,:formatter="dateFormat" 时间格式
// table 日期格式化
dateFormat(row, column,){
let str = column.property
if (row[str]===null){
return null
}else {
return parseTime(row[str]) // parseTime 在utils中
}
},
6, 操作列
<el-tooltip class="item" :hide-after="300" effect="dark" content="联系业主" placement="top-start">
<el-button
size="mini"
icon="el-icon-phone-outline"
type="danger"
@click="handleOwner(scope.$index, scope.row)"></el-button>
</el-tooltip>
问题:
EL-Table获得选中的行
http://blog.sina.com.cn/s/blog_8a15f6af0102z17k.html
修改高亮当前行的样式
//下面通过修改原插件的样式来显示点击的当前行,注意由于是原插件全局的,所以style不能使用scope属性 .el-table .current-row > td { background: #f39a69 !important; }
element-ui 的 table 组件 无法设置行高的问题
因为需要改变table组件的 行高;试了好多方法;包括官方文档提供的方法cell-style,cell-class-name,虽然能加上样式但是没有效果,不知道啥原因,最后 发现 td 下面有个 class 为 cell 的div,于是修改如下
.cell{max-height: 18px !important;}
经测试成功
vue-element-table
猜你喜欢
转载自blog.csdn.net/sinat_33384251/article/details/88427892
今日推荐
周排行