vue ui 设置显示列
作者：互联网
<el-table @sort-change="sortChange" stripe :data="dataList" border style="width: 100%" @selection-change="selectionChangeHandle" :header-cell-style="{ background: '#E3E3E3' }">
<el-table-column type="selection" header-align="center" align="center" width="50" />
<el-table-column prop="name" header-align="center" align="center" label="员工姓名" v-if="lists[0].ispass" />
<el-table-column prop="sex" header-align="center" align="center" label="员工性别" v-if="lists[1].ispass">
<template slot-scope="scope">
<span v-if="scope.row.sex==null" style="font-size:10px">未知</span>
<span v-else style="font-size:10px" type="success">{{scope.row.sex}}</span>
</template>
</el-table-column>
<el-table-column sortable="custom" prop="phone" header-align="center" align="center" label="联系方式" v-if="lists[2].ispass" />
<el-table-column sortable="custom" prop="birthday" header-align="center" align="center" label="生日" v-if="lists[3].ispass">
<template slot-scope="scope">
<span v-if="scope.row.birthday==null" style="font-size:10px">未知</span>
<span v-else style="font-size:10px" type="success">{{scope.row.birthday}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="holdOffice" header-align="center" align="center" label="任职情况" /> -->
<el-table-column prop="holdOffice" header-align="center" align="center" label="在职/离职" v-if="lists[4].ispass">
<template slot-scope="scope">
<el-tag v-if="scope.row.holdOffice=='在职'" type="success">在职</el-tag>
<el-tag v-else type="danger">离职</el-tag>
</template>
</el-table-column>
<el-table-column prop="isTeacher" header-align="center" align="center" label="是/否教师" v-if="lists[5].ispass">
<template slot-scope="scope">
<el-tag v-if="scope.row.isTeacher=='是'" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<!-- <el-table-column prop="role" header-align="center" align="center" label="角色" v-if="lists[6].ispass">
<template slot-scope="scope">
<span v-if="scope.row.role==null" style="font-size:10px">暂无角色</span>
<span v-else style="font-size:10px" type="success">{{scope.row.role}}</span>
</template>
</el-table-column> -->
<el-table-column show-overflow-tooltip prop="department" header-align="center" align="center" label="所属部门" v-if="lists[6].ispass">
<template slot-scope="scope">
<span v-if="scope.row.department==null || scope.row.department == ''" style="font-size:10px">暂无部门</span>
<span v-else style="font-size:10px" type="success">{{scope.row.department}}</span>
</template>
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
<template slot-scope="scope">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i> </span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeHandleCommand('change', scope.$index)">修改</el-dropdown-item>
<!-- <el-dropdown-item :command="beforeHandleCommand('range', scope.row)">设置数据范围</el-dropdown-item> -->
<el-dropdown-item :command="beforeHandleCommand('delate', scope.row.uuid)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
// 设置显示列默认选中列
check: ['员工姓名', '员工性别', '联系方式', '生日', '在职/离职', '是/否教师', '所属部门'],
// 设置显示列选中列表
checkList: ['员工姓名', '员工性别', '联系方式', '生日', '在职/离职', '是/否教师', '所属部门'],
// 设置显示列列表字段数据
lists: [
{ label: '员工姓名', prop: 'name', ispass: true },
{ label: '员工性别', prop: 'sex', ispass: true },
{ label: '联系方式', prop: 'phone', ispass: true },
{ label: '生日', prop: 'birthday', ispass: true },
{ label: '在职/离职', prop: 'holdOffice', ispass: true },
{ label: '是/否教师', prop: 'isTeacher', ispass: true },
// { label: '角色', prop: 'role', ispass: true },
{ label: '所属部门', prop: 'department', ispass: true },
],
watch: {
// 设置显示列
check (newVal) {
if (newVal) {
var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) //未选中
this.lists.map(i => {
if (arr.indexOf(i.label) !== -1) {
i.ispass = false
} else {
i.ispass = true
}
})
}
},
}
标签：vue,label,ui,设置,scope,prop,true,ispass,row 来源： https://www.cnblogs.com/dengfengge/p/15555736.html