selectItem.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <el-option
  3. :key="label+value"
  4. :label="concatString(source[label], source[value])"
  5. :value="source[value]"
  6. :disabled="source.disabled"
  7. :title="concatString(source[label], source[value])"
  8. >
  9. <span>{{ concatString(source[label], source[value]) }}</span>
  10. <span
  11. v-if="isRight"
  12. style="float:right;color:#939393"
  13. >{{ source[value] }}</span>
  14. </el-option>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'ElOptionNode',
  19. props: {
  20. // 每一行的索引
  21. index: {
  22. type: Number,
  23. default: 0
  24. },
  25. // 每一行的内容
  26. source: {
  27. type: Object,
  28. default() {
  29. return {}
  30. }
  31. },
  32. // 需要显示的名称
  33. label: {
  34. type: String,
  35. default: ''
  36. },
  37. // 绑定的值
  38. value: {
  39. type: String,
  40. default: ''
  41. },
  42. // 是否拼接label | value
  43. isConcat: {
  44. type: Boolean,
  45. default: false
  46. },
  47. // 拼接label、value符号
  48. concatSymbol: {
  49. type: String,
  50. default: ' | '
  51. },
  52. // 右侧是否显示绑定的值
  53. isRight: {
  54. type: Boolean,
  55. default() {
  56. return false
  57. }
  58. }
  59. },
  60. methods: {
  61. concatString(a, b) {
  62. a = a || ''
  63. b = b || ''
  64. if (this.isConcat) {
  65. return a + ((a && b) ? this.concatSymbol : '') + b
  66. }
  67. return a
  68. }
  69. }
  70. }
  71. </script>