vue ui 设置显示列

2021-11-15 13:02:33 阅读：202 来源： 互联网

标签：vue label ui 设置 scope prop true ispass row

<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="在职/离职" 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 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('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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue ui 设置显示列