使用element table的展开行功能,代码如下:
<el-table
:data="tableData5"
style="width: 100%">
<el-table-column
type="selection"
:width="100"
align="center">
</el-table-column>
<el-table-column type="expand" >
<template>
<el-table style="width: 100%" :show-header="false" :data="tableData5" class="demo-table-expand">
<el-table-column
:width="100"
fixed
align="center">
</el-table-column>
<el-table-column
:width="48"
fixed
align="center">
</el-table-column>
<el-table-column :width="WIDTH">
<span>商品名称xxxxx</span>
</el-table-column>
<el-table-column :width="WIDTH">
<span>所属店铺</span>
</el-table-column>
<el-table-column :width="WIDTH">
<span>商品 ID</span>
</el-table-column>
<el-table-column :width="WIDTH">
<span>店铺 ID</span>
</el-table-column>
<el-table-column :width="WIDTH">
<span>商品分类</span>
</el-table-column>
<el-table-column :width="WIDTH">
<span>店铺地址</span>
</el-table-column>
<el-table-column
:width="WIDTH"
prop="desc">
<span>描述</span>
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述2"
prop="desc">
<span>描述</span>
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述3"
prop="desc">
<span>描述</span>
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述4"
prop="desc">
<span>描述</span>
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述5"
prop="desc">
<span>描述</span>
</el-table-column>
<el-table-column
fixed="right"
:width="WIDTH"
label="描述6"
prop="desc">
<span>描述</span>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
:width="WIDTH"
label="p商品 ID"
prop="id">
</el-table-column>
<el-table-column
:width="WIDTH"
label="商品名称"
prop="name">
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述"
prop="desc">
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述2"
prop="desc">
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述3"
prop="desc">
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述4"
prop="desc">
</el-table-column>
<el-table-column
:width="WIDTH"
label="描述5"
prop="desc">
</el-table-column>
<el-table-column
fixed="right"
:width="WIDTH"
label="描述6"
prop="desc">
</el-table-column>
</el-table>
tableData5: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
isShow: false
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
/deep/ .el-table__expanded-cell {
padding: 0;
然后,子表出现横向滚动条了:
如果使用: ::-webkit-scrollbar{display:none;}
父表最下面的滚动条也没有了,
请问如何去掉横向滚动条?
![image](/img/bVcNi0y)