Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...