el-table动态列筛选2种(1、普通多选框,2、树形穿梭框筛选)

在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,这就需要对列进行动态筛选。

第一种:用多选框操作

HTML:

JS:

结果:

el-table动态列筛选2种(1、普通多选框,2、树形穿梭框筛选)_第1张图片

 el-table动态列筛选2种(1、普通多选框,2、树形穿梭框筛选)_第2张图片

第二种:由于穿梭框定义比较复杂,所以暂时把多选框做成类似穿梭框形式,支持表格动态筛选,

HTML:

js:

css:

 

效果展示:支持左侧搜索,右侧可删除

el-table动态列筛选2种(1、普通多选框,2、树形穿梭框筛选)_第3张图片

el-table动态列筛选2种(1、普通多选框,2、树形穿梭框筛选)_第4张图片

你可能感兴趣的:(vue,vue.js,javascript,html5,elementui)