Browse Source

radio增加自定义显示、增加表格横向滚动条

master
zq 2 days ago
parent
commit
1ac91dc80d
  1. 12
      src/components/GuipRadio.vue
  2. 15
      src/style/theme/common.scss
  3. 10
      src/views/elementGroups.vue

12
src/components/GuipRadio.vue

@ -23,6 +23,10 @@ export default {
type: Boolean,
default: false
},
selectedLabelKey: {
type: String,
default: ''
},
// :
// 1. : [{ label: '', value: '', disabled: false }]
// 2. : { key1: 'value1', key2: 'value2' }
@ -131,7 +135,13 @@ export default {
return option.value;
}
return option[this.labelKey] || option;
//
const isSelected = this.getValue(option) === this.selectedValue;
// selectedLabellabelKey
return isSelected && option[this.selectedLabelKey]
? option[this.selectedLabelKey]
: option[this.labelKey] || option;
},
getValue(option) {
//

15
src/style/theme/common.scss

@ -40,9 +40,11 @@ body {
text-align: left;
}
/* 隐藏全局滚动条 */
::-webkit-scrollbar {
/* 全局隐藏滚动条但排除el-table */
*:not(.el-table)::-webkit-scrollbar {
display: none;
}
body {
scrollbar-width: none;
-ms-overflow-style: none;
@ -56,6 +58,17 @@ body {
.element::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.el-table__body-wrapper::-webkit-scrollbar {
display: block !important;
width: 6px;
height: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.common_title{
font-weight: bold;
letter-spacing: 0.08em;

10
src/views/elementGroups.vue

@ -70,7 +70,7 @@
</div>
<div class="ele-item">
<label for="">单选框2数组格式 + 自定义取值</label>
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
value-key="id" />
</div>
@ -681,10 +681,10 @@ export default {
input3: '',
},
languageOptions1: [
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh', id: '1', name: '麻辣烫' },
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh', id: '10', name: '易烊千玺' },
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh', id: '11', name: '王源' }, //
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh', id: '12', name: '王俊凯' },
{ label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: '1', name: '麻辣烫' },
{ label: 'Python', value: 'py', selectedLabel: '柠檬茶', id: '10', name: '易烊千玺' },
{ label: 'Java', value: 'java', disabled: true, selectedLabel: '榴莲大福', id: '11', name: '王源' }, //
{ label: 'Go', value: 'go', selectedLabel: '444222麻辣烫', id: '12', name: '王俊凯' },
],
languageOptions: {
'20': '查重站',

Loading…
Cancel
Save