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  ui 设置显示列

 

 

上一篇:开源侧滑菜单SlidingMenu主要方法介绍


下一篇:【DB笔试面试51】请问序列MY_SEQ的当前值是()