标签：code item 样式 res selected drug 块状 vue color
vue代码：
1 <template>
2 <div>
3 <div class="main">
4 <ul>
5 <li
6 v-for="(item, index) in list"
7 :key="index"
8 :class="{ new: item.new }"
9 @click="Operat(item)"
10 >
11 <span>{{ item.drug_name }}</span>
12 </li>
13 </ul>
14 </div>
15 <div>
16 <span class="bottom">
17 <el-button @click="Cancel()" size="mini">取 消</el-button>
18 <el-button type="primary" size="mini" @click="Save()">确 定</el-button>
19 </span>
20 </div>
21 </div>
22 </template>
23
24 <script>
25 import { GetCUseTItems, SaveRecipe } from "@/api/recipe.js";
26 export default {
27 data() {
28 return {
29 list: [],
30 value: "",
31 selected: [],
32 type: "0",
33 drugParam: {},
34 emer_med_rec_id: "",
35 };
36 },
37 mounted() {
38 this.Init();
39 },
40 methods: {
41 Init() {
42 GetCUseTItems(this.type).then((res) => {
43 if (res.code == 1) {
44 res.data = JSON.parse(res.data.toString());
45 res.data.forEach((t) => {
46 t.new = false;
47 });
48 this.list = res.data;
49 //console.log(res.data);
50 } else {
51 this.showTip("获取药品失败!", "error");
52 }
53 });
54 },
55 Operat(item) {
56 if (item.new) {
57 this.selected.forEach((t) => {
58 if (t.drug_code == item.drug_code) {
59 this.selected.remove(item.drug_code);
60 }
61 });
62 item.new = false;
63 } else {
64 this.selected.push(item.drug_code);
65 item.new = true;
66 }
67 console.log(this.selected);
68 },
69
70 Cancel() {
71 this.$emit("cancelSch");
72 },
73 Save() {
74 if (this.selected.length == 0) {
75 this.showTip("您未选择药品!", "warning");
76 return;
77 }
78
79 this.drug_code = {
80 drug_codes: this.selected,
81 emer_med_rec_id: this.emer_med_rec_id,
82 };
83 //console.log(this.drug_code);
84 SaveRecipe(this.drug_code).then((res) => {
85 if (res.code == 1) {
86 this.showTip(res.message, "success");
87 this.Init();
88 } else {
89 this.showTip(res.message, "error");
90 }
91 });
92 },
93 },
94 };
95 </script>
96
97 <style scoped>
98 .main {
99 min-height: 400px;
100 margin: 30px 30px;
101 width: calc(100% - 200px);
102 overflow-x: hidden;
103 overflow-y: scroll;
104 }
105 .main ul {
106 list-style: none;
107 padding: 0;
108 margin: 0;
109 }
110 .add {
111 display: inline-block;
112 border-radius: 5px;
113 padding: 5px;
114 background-color: #08304a;
115 }
116 .main ul > li {
117 display: inline-block;
118 /* background-color: #b3ee3a;
119 color: #333; */
120 background-color: #08304a;
121 color: #aaa;
122 border-radius: 5px;
123 padding: 16px 20px;
124 font-size: 19px;
125
126 margin-right: 10px;
127 margin-bottom: 10px;
128 cursor: pointer;
129 position: relative;
130 }
131 .main ul > li.selected {
132 background-color: #ccc;
133 cursor: default;
134 color: #888;
135 }
136 .main ul > li.new {
137 /* background-color: #08304a;
138 color: #aaa; */
139 background-color: #b3ee3a;
140 color: #333;
141 /* min-width: 150px; */
142 }
143 .main li > i {
144 position: absolute;
145 top: 2px;
146 right: 3px;
147 color: #fff;
148 font-size: 13px;
149 border-radius: 15px;
150 padding: 0 3px;
151 background-color: #ff0000;
152 font-weight: bold;
153 }
154 /* .bottom {
155 float: right;
156 margin-right: 30px;
157 margin-bottom: 30px;
158 } */
159 .bottom {
160 margin-left: 70%;
161 }
162 </style>>
效果页面：
标签：code,item,样式,res,selected,drug,块状,vue,color 来源： https://www.cnblogs.com/chenpanpan/p/14528065.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。