赞
踩
1.el-select下拉框的默认值,点击下拉框,弹出el-table表格默认选中表格值
2.根据关键词进行搜索,并选中,不清除el-select原来值
隐藏表格行样式
- .el-table .hidden-row {
- display: none;
- height: 0;
- }
- <el-select
- size="mini"
- ref="selectref"
- @visible-change="visibleType"
- v-model="dataForm.teacher"
- filterable
- multiple
- placeholder="请选择老师"
- value-key="id">
- <el-option
- v-for="item in teacherArray"
- :key="item.id"
- :label="item.name"
- :value="{ 'id':item.id , 'name':item.name }">
- <span style="float: left">{{ item.name }}</span>
- <span style="float: right; color: #8492a6;
- font-size: 13px;margin-right: 12px">
- {{ item.code }}</span>
- </el-option>
- </el-select>
-
- <el-dialog
- title="选择"
- :visible.sync="isGive"
- width="60%">
- <div>
- <div>
- <el-input
- v-model="inputName"
- @input="filterData"
- placeholder="请输入姓名进行搜索">
- </el-input>
- </div>
- <el-table
- ref="multipleTable"
- :row-class-name="tableRowClassName"
- :data="teacherArray"
- height="calc(100vh - 250px)"
- tooltip-effect="dark"
- style="width: 100%;"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection" label="" width="55">
- </el-table-column>
- <el-table-column
- prop="name" label="姓名" width="120">
- </el-table-column>
- <el-table-column
- prop="typeName" label="类型"
- :filters="[{text: '专职', value: '专职'},
- {text: '兼职', value: '兼职'},
- ]"
- :filter-method="filterHandlerType">
- </el-table-column>
- </el-table>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button size="mini"
- @click="isGive = false">取 消</el-button>
- <el-button size="mini" type="primary"
- @click="isGive = false">确 定</el-button>
- </span>
- </span>
- </el-dialog>
data的数据
- data() {
- return {
- //选中的数据
- dataForm: {
- teacher: '',
- },
- // 表格的数据
- teacherArray: [
- {
- id: 58,
- name: "李敏",
- school_id: "1",
- school_name: "重庆",
- show: true,
- type: 1,
- typeName: "专职",
- },
- {
- id: 54,
- name: "李敏1",
- school_id: "1",
- school_name: "重庆1",
- show: true,
- type: 1,
- typeName: "兼职",
- },
- {
- id: 52,
- name: "李敏2",
- school_id: "2",
- school_name: "重庆2",
- show: true,
- type: 1,
- typeName: "全职",
- },
- {
- id: 53,
- name: "李敏3",
- school_id: "3",
- school_name: "重庆3",
- show: true,
- type: 1,
- typeName: "全职",
- }
- ],
- //弹框
- isGive: false,
- //根据关键词进行搜索
- inputName:‘’
- }
- }
methods方法
- methods{
-
- // 是否显示下拉框
- visibleType(e) {
- //弹框
- this.isGive = true
- let list = []
- this.$nextTick(() => {
- //不显示下拉框
- this.$refs.selectref.blur();
-
- this.teacherArray.forEach(item => {
- //选中的参数
- this.dataForm.teacher.forEach(key => {
- if (item.id ==key.id) {
- list.push(item)
- }
- })
- })
- //默认选中
- this.toggleSelection(list)
- })
- },
- // 表格默认选中
- toggleSelection(rows) {
- this.$nextTick(() => {
- if (rows) {
- rows.forEach(row => {
- this.$refs.multipleTable.toggleRowSelection(row,true)
- });
- }else {
- this.$refs.multipleTable.clearSelection();
- }
- });
- },
- // 是否隐藏行数据
- tableRowClassName: function(row, index) {
- if (row.row.show==false) {
- return 'hidden-row';
- }
- return '';
- },
- //判断是否为空
- isNotEmpty(s) {return s && s !== ''},
- //根据输入的值判断是否显示行
- filterData(e) {
-
- if (this.isNotEmpty(e)) {
- this.teacherArray.filter(item => {
- if (item.name.indexOf(e) != -1) {
- item.show=true
- }else{
- item.show=false
- }
- })
- }else{
- this.teacherArray.forEach(item=>{
- item.show=true
- })
- }
- },
- //表格选中的值
- handleSelectionChange(val) {
- let list = []
- val.forEach(item => {
- list.push({
- id: item.id,
- type: item.type,
- name: item.name
- })
- })
- this.dataForm.teacher = list
- },
- //过滤
- filterHandlerType(value, row, column) {
- return row.typeName === value;
- },
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。