I. Implementation functions: Click the operation button in el-Table to highlight the line, click other places will not be displayed

The initial setup is to add highlight-current-row CSS to the table

El-table__body tr. Current-row >td{background: rgba(39, 120, 241, 0.1)! important; border-top: 1px solid #2778F1 ! important; border-bottom: 1px solid #2778F1 ! important; } .el-table__body tr.current-row>td:first-child{ border-left: 1px solid #2778F1 ! important; } .el-table__body tr.current-row>td:last-child{ border-right: 1px solid #2778F1 ! important; }Copy the code
<el-table ref="table" :data="historyConversations" v-loading="tableLoading" tooltip-effect="dark" height="calc(100vh - 270px)" stripe class="tableBox" style="width: 100%;" @sort-change="changeSort" highlight-current-row > <el-table-column label=" visitor "prop="customer.nickname" /> <el-table-column width="100" label=" operation "> <template slot-scope="scope"> <el-button size="mini" type="text" @click="showMessages(scope.row)" > </el-button> </template> </el-table-column> </el-table>Copy the code

If you click on a row and add the class[current-row] name to the row, the border of some columns is not displayed, but the border of the column where the button is located. I would appreciate it if you could leave a messageYou can add a class to the line and change the code

<el-table ref="table" :data="historyConversations" v-loading="tableLoading" tooltip-effect="dark" height="calc(100vh - 270px)" stripe class="tableBox" style="width: 100%;" @sort-change="changeSort" :row-class-name="tableRowClassName" > <el-table-column label=" visitor "prop="customer. Nickname" /> <el-table-column width="100" label=" operation "> <template slot-scope="scope"> <el-button size="mini" type="text" @click="showMessages(scope.row)" > </el-button> </template> </el-table-column> </el-table>Copy the code
methods:{
    tableRowClassName(row) {
    if (row.row.id === this.id) {
      return 'current-row';
    }
    return '';
  },
  }
   showMessages(row) {
    this.id = row.id;
    this.$refs.HistoryConversationDetail.visible = true;
  },
Copy the code

That’s what you want

When an array loop uses the same validation, we can add rules to the el-form item.

<el-form ref="form" :model="form" label-width="80px" v-loading="loading" :rules="rules" > <el-form-item label=" <el-input v-model="form.standard_question" placeholder=" placeholder "style="width: 1px; calc(100% - 120px);" /> <el-button type="primary" style="width: 110px; margin-left: 10px;" Recognize2 ="onRecognize2"> </el-button> </el-form-item> <div style="max-height: 350px; overflow-y: auto;" > <el-form-item :label="i === 0? "V -for="(t, i) in form.extended_questions" :key="i" :prop="'extended_questions.'+i" :rules="rules.exo" > <div style="width: calc(100% - 120px); display: inline-block; position: relative;" <el-input v-model="form.extended_questions[I]" placeholder=" placeholder "/> <el-input v-model="form.extended_questions[I]" placeholder=" placeholder" @click="form.extended_questions.splice(i, 1)" style="width: 40px; margin-left: 10px; position: absolute; right: 10px;" v-if="form.extended_questions.length > 1" > <i class="el-icon-error" style="width: 12px; height: 12px;" /> </el-button> </div> </el-form-item> </div> </el-form>Copy the code
data(){ const validatePass = (rule, value, callback) => { if (value) { sameQuestion(value, this.faqId) .then((res) => { if (res.data.tip) { callback(new Error(res.data.tip)); }}); }}; Return {rules: {standard_question: [{required: true, message: 'Please enter standard question ', trigger: 'blur'},], exo: [{validator: validatePass, trigger: 'blur' }, ], }, } }Copy the code

In this case, when deleting the extension question, the error message does not move along with the content of the extension question, so it can be modified.

<el-form ref="form" :model="form" label-width="80px" v-loading="loading" :rules="rules" > <el-form-item label=" <el-input v-model="form.standard_question" placeholder=" placeholder "style="width: 1px; calc(100% - 120px);" /> <el-button type="primary" style="width: 110px; margin-left: 10px;" @click="onRecognize2"> </el-button> </el-form-item> <div style="max-height: 300px; overflow-y: auto;" > <el-form-item :label="i === 0? "V -for="(t, i) in form.extended_questions" :key="t.id" :prop="'extended_questions.'+i+'.text'" :rules="rules.exo" > <div style="width: calc(100% - 120px); display: inline-block; position: relative;" "> <el-input v-model="form.extended_questions[I]. Text" placeholder=" placeholder "/> @click="form.extended_questions.splice(i, 1)" style="width: 40px; margin-left: 10px; position: absolute; right: 10px;" v-if="form.extended_questions.length > 1" > <i class="el-icon-error" style="width: 12px; height: 12px;" /> </el-button> </div> </el-form-item> </div> </el-form>Copy the code