Closed xieqx1991 closed 2 months ago
<virtual-scroll ref="virtualScroll" :data="list" :item-size="56" key-prop="id" @change="(virtualList) => (tableData = virtualList)" > <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }"> <el-table :data="tableData" :headerCellStyle="headerCellFixedStyle" :cellStyle="cellFixedStyle" border stripe row-key="id" height="600px" style="width: 100%" @header-dragend="onHeaderDragend" > <VirtualColumn v-if="show" vfixed prop="date" label="日期" min-width="180" > </VirtualColumn> <VirtualColumn vfixed prop="name" label="姓名" :formatter="formatter" min-width="150" > </VirtualColumn> <VirtualColumn vfixed="right" label="id" prop="id"></VirtualColumn> <!-- right无效 --> <VirtualColumn vfixed label="内容" width="260" prop="text" ></VirtualColumn> <el-table-column label="内容省略" width="260" prop="text" show-overflow-tooltip ></el-table-column> <el-table-column label="详情" min-width="260"> <template slot-scope="{ row }"> <el-button type="text" @click="row.show = !row.show">{{ row.show ? "隐藏" : "显示" }}</el-button> <div v-if="row.show">{{ row.text2 }}</div> </template> </el-table-column> <el-table-column prop="province" label="省份" width="150"> </el-table-column> <el-table-column prop="province" label="省份" width="200"> </el-table-column> <el-table-column class-name="province" prop="province" label="省份" width="200" > </el-table-column> <el-table-column className="city" prop="city" label="市区" width="320" > </el-table-column> <VirtualColumn vfixed prop="address" label="地址" width="300"> <!-- left无效 --> </VirtualColumn> <VirtualColumn vfixed="right" prop="zip" label="邮编" width="150"> </VirtualColumn> <VirtualColumn vfixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button > <el-button type="text" size="small">编辑</el-button> </template> </VirtualColumn> </el-table> </template> </virtual-scroll>
是的,设计如此