element el-table实现可进行横向拖拽滚动
在Element UI的el-table
组件中,要实现横向拖拽滚动,可以使用第三方库如element-ui-slick-table
或自定义实现。以下是一个使用Vue.js和Element UI实现的简单示例:
- 安装
element-ui-slick-table
:
npm install element-ui-slick-table --save
- 在Vue组件中使用:
<template>
<div>
<el-table
ref="slickTable"
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<!-- 其他列 -->
</el-table>
</div>
</template>
<script>
import SlickTable from 'element-ui-slick-table';
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', ... },
// 其他数据
]
};
},
mounted() {
this.$nextTick(() => {
new SlickTable(this.$refs.slickTable);
});
}
};
</script>
在这个示例中,我们首先安装了element-ui-slick-table
库,然后在Vue组件的模板中定义了一个el-table
,并在组件的mounted
钩子中初始化了该库。
请注意,这个库可能不是完全兼容所有Element UI版本,你可能需要检查它与你使用的Element UI版本的兼容性。如果它不兼容,你可能需要修改源代码或寻找其他解决方案。
评论已关闭