#javascript #vue.js
Вопрос:
У меня есть html-таблица следующего вида :
lt;tbodygt; lt;tr v-for="employee in employees" :key="employee.EmployeeId" @dblclick="rowOnDblClick(employee.EmployeeId)" @click="rowOnClick(employee.EmployeeId)" :class="{rowSelected: rowSelected.status}" gt; lt;tdgt;{{employee.EmployeeCode}}lt;/tdgt; lt;tdgt;{{employee.FullName}}lt;/tdgt; lt;tdgt;{{employee.GenderName}}lt;/tdgt; lt;td style="text-align: center;"gt;{{employee.DateOfBirth|dateofbirth}}lt;/tdgt; lt;tdgt;{{employee.PhoneNumber}}lt;/tdgt; lt;td :title="employee.Email"gt;{{employee.Email}}lt;/tdgt; lt;tdgt;{{employee.PositionName}}lt;/tdgt; lt;tdgt;{{employee.DepartmentName}}lt;/tdgt; lt;td style="text-align: right;"gt;{{employee.Salary|money}}lt;/tdgt; lt;tdgt;{{employee.WorkStatus|status}}lt;/tdgt; lt;/trgt; lt;/tbodygt; Теперь я хочу, чтобы каждый раз, когда я выбираю строку, эта строка добавлялась, класс был активным
Ткс так много
Ответ №1:
Попробуйте, как в следующем фрагменте:
new Vue({ el: '#demo', data() { return { employees: [{EmployeeId: 1, EmployeeCode: 1, FullName: 'aa bb', GenderName: 'm'}, {EmployeeId: 2, EmployeeCode: 2, FullName: 'cc dd', GenderName: 'm'}, {EmployeeId: 3, EmployeeCode: 3, FullName: 'ee ff', GenderName: 'm'}], selected: null } }, methods: { rowOnClick(id) { this.selected = id } } }) Vue.config.productionTip = false Vue.config.devtools = false .active { background-color: orange; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="demo"gt; lt;tablegt; lt;tbodygt; lt;tr v-for="employee in employees" :key="employee.EmployeeId" @click="rowOnClick(employee.EmployeeId)" :class="selected === employee.EmployeeId amp;amp; 'active'" gt; lt;tdgt;{{employee.EmployeeCode}}lt;/tdgt; lt;tdgt;{{employee.FullName}}lt;/tdgt; lt;tdgt;{{employee.GenderName}}lt;/tdgt; lt;!--lt;td style="text-align: center;"gt;{{employee.DateOfBirth|dateofbirth}}lt;/tdgt; lt;tdgt;{{employee.PhoneNumber}}lt;/tdgt; lt;td :title="employee.Email"gt;{{employee.Email}}lt;/tdgt; lt;tdgt;{{employee.PositionName}}lt;/tdgt; lt;tdgt;{{employee.DepartmentName}}lt;/tdgt; lt;td style="text-align: right;"gt;{{employee.Salary|money}}lt;/tdgt; lt;tdgt;{{employee.WorkStatus|status}}lt;/tdgt;--gt; lt;/trgt; lt;/tbodygt; lt;/tablegt; lt;/divgt; Комментарии:
1. это работает, спасибо тебе большое
2. Добро пожаловать, приятель, ура 🙂