element table展开行功能,fixed定位出现滚动条

发布于 2022-09-12 13:57:12 字数 5843 浏览 21 评论 0

使用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)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文