当前位置:   article > 正文

el-select禁止下拉,点击弹出el-table表格,根据关键词进行搜索,并不清除el-select框里面的值

el-select禁止下拉

 1.el-select下拉框的默认值,点击下拉框,弹出el-table表格默认选中表格值

 

 

2.根据关键词进行搜索,并选中,不清除el-select原来值

隐藏表格行样式 

  1. .el-table .hidden-row {
  2. display: none;
  3. height: 0;
  4. }
  1. <el-select
  2. size="mini"
  3. ref="selectref"
  4. @visible-change="visibleType"
  5. v-model="dataForm.teacher"
  6. filterable
  7. multiple
  8. placeholder="请选择老师"
  9. value-key="id">
  10. <el-option
  11. v-for="item in teacherArray"
  12. :key="item.id"
  13. :label="item.name"
  14. :value="{ 'id':item.id , 'name':item.name }">
  15. <span style="float: left">{{ item.name }}</span>
  16. <span style="float: right; color: #8492a6;
  17. font-size: 13px;margin-right: 12px">
  18. {{ item.code }}</span>
  19. </el-option>
  20. </el-select>
  21. <el-dialog
  22. title="选择"
  23. :visible.sync="isGive"
  24. width="60%">
  25. <div>
  26. <div>
  27. <el-input
  28. v-model="inputName"
  29. @input="filterData"
  30. placeholder="请输入姓名进行搜索">
  31. </el-input>
  32. </div>
  33. <el-table
  34. ref="multipleTable"
  35. :row-class-name="tableRowClassName"
  36. :data="teacherArray"
  37. height="calc(100vh - 250px)"
  38. tooltip-effect="dark"
  39. style="width: 100%;"
  40. @selection-change="handleSelectionChange">
  41. <el-table-column
  42. type="selection" label="" width="55">
  43. </el-table-column>
  44. <el-table-column
  45. prop="name" label="姓名" width="120">
  46. </el-table-column>
  47. <el-table-column
  48. prop="typeName" label="类型"
  49. :filters="[{text: '专职', value: '专职'},
  50. {text: '兼职', value: '兼职'},
  51. ]"
  52. :filter-method="filterHandlerType">
  53. </el-table-column>
  54. </el-table>
  55. </div>
  56. <span slot="footer" class="dialog-footer">
  57. <el-button size="mini"
  58. @click="isGive = false">取 消</el-button>
  59. <el-button size="mini" type="primary"
  60. @click="isGive = false">确 定</el-button>
  61. </span>
  62. </span>
  63. </el-dialog>

data的数据

  1. data() {
  2. return {
  3. //选中的数据
  4. dataForm: {
  5. teacher: '',
  6. },
  7. // 表格的数据
  8. teacherArray: [
  9. {
  10. id: 58
  11. name: "李敏"
  12. school_id: "1"
  13. school_name: "重庆"
  14. show: true
  15. type: 1
  16. typeName: "专职"
  17. },
  18. {
  19. id: 54
  20. name: "李敏1"
  21. school_id: "1"
  22. school_name: "重庆1"
  23. show: true
  24. type: 1
  25. typeName: "兼职"
  26. },
  27. {
  28. id: 52
  29. name: "李敏2"
  30. school_id: "2"
  31. school_name: "重庆2"
  32. show: true
  33. type: 1
  34. typeName: "全职"
  35. },
  36. {
  37. id: 53
  38. name: "李敏3"
  39. school_id: "3"
  40. school_name: "重庆3"
  41. show: true
  42. type: 1
  43. typeName: "全职"
  44. }
  45. ],
  46. //弹框
  47. isGive: false,
  48. //根据关键词进行搜索
  49. inputName:‘’
  50. }
  51. }

 methods方法

  1. methods{
  2. // 是否显示下拉框
  3. visibleType(e) {
  4. //弹框
  5. this.isGive = true
  6. let list = []
  7. this.$nextTick(() => {
  8. //不显示下拉框
  9. this.$refs.selectref.blur();
  10. this.teacherArray.forEach(item => {
  11. //选中的参数
  12. this.dataForm.teacher.forEach(key => {
  13. if (item.id ==key.id) {
  14. list.push(item)
  15. }
  16. })
  17. })
  18. //默认选中
  19. this.toggleSelection(list)
  20. })
  21. },
  22. // 表格默认选中
  23. toggleSelection(rows) {
  24. this.$nextTick(() => {
  25. if (rows) {
  26. rows.forEach(row => {
  27. this.$refs.multipleTable.toggleRowSelection(row,true)
  28. });
  29. }else {
  30. this.$refs.multipleTable.clearSelection();
  31. }
  32. });
  33. },
  34. // 是否隐藏行数据
  35. tableRowClassName: function(row, index) {
  36. if (row.row.show==false) {
  37. return 'hidden-row';
  38. }
  39. return '';
  40. },
  41. //判断是否为空
  42. isNotEmpty(s) {return s && s !== ''},
  43. //根据输入的值判断是否显示行
  44. filterData(e) {
  45. if (this.isNotEmpty(e)) {
  46. this.teacherArray.filter(item => {
  47. if (item.name.indexOf(e) != -1) {
  48. item.show=true
  49. }else{
  50. item.show=false
  51. }
  52. })
  53. }else{
  54. this.teacherArray.forEach(item=>{
  55. item.show=true
  56. })
  57. }
  58. },
  59. //表格选中的值
  60. handleSelectionChange(val) {
  61. let list = []
  62. val.forEach(item => {
  63. list.push({
  64. id: item.id,
  65. type: item.type,
  66. name: item.name
  67. })
  68. })
  69. this.dataForm.teacher = list
  70. },
  71. //过滤
  72. filterHandlerType(value, row, column) {
  73. return row.typeName === value;
  74. },
  75. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/104803
推荐阅读
相关标签
  

闽ICP备14008679号