elementui table隐藏列,vue element ui 动态表格
这篇文章主要介绍了某视频剪辑软件元素实现动态控制表格列的显示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue elementui(表格，多选框)实现动态控制表格列的显示和隐藏，供大家参考，具体内容如下
imdex.vue
模板
差异
差异
El-table:data=表格数据边框样式=宽度：100% ref=表格
埃尔-表格-列属性=索引标签=序号宽度=150
模板槽-范围="范围"
div{{ scope .$index 1 }}/div
/模板
/El-表格-列
埃尔-表格-列
v-for=(item，index) in againRender
:width=item.width
:prop=item.prop
:key=index
显示溢出工具提示
:label=item.label
/El-表格-列
/el-table
/div
div class=dsadas
new-checkbox:all-item-data= item list :change-props= change props /
/div
/div
/模板
脚本
从" axios "导入axios
//采用异步加载，防止父组件引入子组件，子组件的的钩子函数全部执行完毕
const newCheckbox=()=({
组件：导入(。/复选框。vue’)，
延迟：2000年，
超时：2000,
});
导出默认值{
data() {
返回{
表数据：[],
againRender: []，
项目列表：[
{
allListDate: [
//后台数据结构跟这有一样
{标签: 姓名，宽度： 120 ,属性：名称 },
{标签: 性别，宽度： 120 ,道具：性 },
{道具： 年龄，标签:年龄，宽度： 120 },
{ prop: styChild ，标签: 身份，宽度： 120 },
{道具： gradeClass ，标签: 学历，宽度： 200 },
],
selectedList: [
{标签: 姓名，宽度： 120 ,属性：名称 },
{标签: 性别，宽度： 120 ,道具：性 },
{道具： 年龄，标签:年龄，宽度： 120 },
],
},
],
};
},
组件：{新复选框}，
已安装(){
这个。getelementvaulehieen()；
},
方法：{
改变道具(值){
这个. nextTick((_)={
this.againRender=value
这个参考文献。桌子。dolayout
});
},
getElementVauleHieen() {
axios。get( http://localhost:3000/elementVauleHieen)).然后((res)={
这个。表数据=RES . data
});
},
},
};
/脚本
style lang=less
/风格
复选框。某视频剪辑软件文件
模板
差异
差异
埃尔-复选框
：不确定=不确定
v-model=checkAll
@change=handleCheckAllChange
全选/El-复选框
/div
埃尔-复选框-组
v-model=检查过的城市
@ change= handlecheckedctieschange
埃尔-复选框
allItemDataChecked中的v-for=(项目，索引)
:label=item.label
:key=index
@ change=(val)=checkbox change(val，item，index)
{{ item.label }}/el-checkbox
/el-checkbox-group
/div
/模板
脚本
导出默认值{
名称："复选框",
data() {
返回{
是偶然的：假的，
错误，
检查的城市：[],
allitemdata检查：这个。allitemdata[0].allListDate，
checkboxChangeList: []，
};
},
道具：{
allItemData: {
类型：数组，
默认值：()=[],
},
changeProps: {
类型：功能，
默认值：()=false，
},
},
已安装(){
let list=[]；
如果(这个。allitemdatachecked。长度){
这个。allitemdatachecked。foreach((元素)={
这个。allitemdata[0]。选定的列表。foreach((item)={
if(元素。道具===物品。道具元素。标签===项目。标签){
列表。推(项。标签)；
}
});
});
this.checkedCities=list
}
},
观察：{
选中的城市(新闻){
这个。checkboxchangelist=[]；//防止多次点击重复触发数据
if (newVlaue.length===0) {
这个。换道具([])；
}否则{
这个。allitemdatachieved。foreach((ele)={
newVlaue.forEach((item)={
if (ele.label===item) {
这个。checkboxchangelist。推(ele)；
这个。复选框更改()；
}
});
});
}
},
},
方法：{
handleCheckAllChange(val) {
这个。选中的城市=[]；
假设结果=[];
this.checkedCities=val
？这个。allitemdatachecked。foreach((元素)={
结果.推送(元素。标签);
})
: [];
this.checkedCities=结果
},
handleCheckedCitiesChange(值){
这个。全部检查=值。长度===这个。allitemdatachecked。长度；
},
checkboxChange() { //发现这个没用
这个。换道具(这个。checkboxchangelist)；
},
},
};
/脚本
style lang=less
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。