<template #default="scope"> <el-tooltip effect="dark" placement="top"> <template #content> <div class="set-popper">{<!-- -->{<!-- -->scope.row.content}}</div> </template> <div class="set-content">{<!-- -->{<!-- --> scope.row.content }}</div> </el-tooltip> </template> <style lang="scss" scoped> .set-popper {<!-- --> max-width: 500px; } .set-content {<!-- --> overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style>
Case:
<template> <div class="app-container"> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain size="mini" @click="handleAdd" v-hasPermi="['business:servermsg:add']" > <el-icon> <plus/> </el-icon> New </el-button> </el-col> </el-row> <el-table v-loading="loading" :data="servermsgList" @selection-change="handleSelectionChange"> <el-table-column label="serial number" align="center" width="60" :show-overflow-tooltip="true"> <template v-slot="scope"> <span>{<!-- -->{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span> </template> </el-table-column> <!-- <el-table-column label="ID" align="center" prop="id"/>--> <el-table-column label="Copy title" align="center" prop="text"/> <el-table-column label="Content introduction" :align="center" prop="content"> <template #default="scope"> <el-tooltip effect="dark" placement="top"> <template #content> <div class="set-popper">{<!-- -->{scope.row.content}}</div> </template> <div class="set-content">{<!-- -->{ scope.row.content }}</div> </el-tooltip> </template> </el-table-column> <el-table-column label="Operation" align="center" class-name="small-padding fixed-width"> <template v-slot="scope"> <el-button size="mini" type="text" @click="handleUpdate(scope.row)" > <el-icon> <edit/> </el-icon> Revise </el-button> <el-button size="mini" type="text" @click="handleDelete(scope.row)" > <el-icon> <delete/> </el-icon> delete </el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- Add or modify server management dialog box --> <el-dialog :title="title" v-model="open" width="800px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label-position="right" label="Copy Title" prop="text"> <el-input maxlength="200" show-word-limit v-model="form.text" placeholder="Please enter the copy title"/> </el-form-item> <el-form-item label="Content introduction" prop="content" label-width="100" > <editor v-model="form.content" show-word-limit :min-height="192"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">Confirm</el-button> <el-button @click="cancel">Cancel</el-button> </div> </el-dialog> </div> </template> <style lang="scss" scoped> .set-popper { max-width: 500px; } .set-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <script> import {getGiraffeManorInstro, addGiraffeManorInstro, listGiraffeManorInstro, delGiraffeManorInstro, updateGiraffeManorInstro} from "@/api/business/giraffemanorInstro"; import Pagination from '@/components/Pagination' export default { name: "Servermsg", data() { return { isDisable:false, // mask layer loading: true, // Select array ids: [], // Not individually disabled single: true, // Not multiple disabled multiple: true, //Display search criteria showSearch: true, //Total number of items total: 0, // Server manages table data servermsgList: [], // Popup layer title title: "", // Whether to display the pop-up layer open: false, // Query parameters queryParams: { pageNum: 1, pageSize: 10, }, // form parameters form: {}, // form validation rules: { // serverId: [{ required: true, message: "ServerId cannot be empty", trigger: "blur" }], } }; }, created() { this.getList(); }, methods: { /** Query server management list */ getList() { this.loading = true; listGiraffeManorInstro(this.queryParams).then(response => { this.servermsgList = response.rows; this.total = response.total; this.loading = false; }); }, // Cancel button cancel() { this.open = false; this.reset(); }, // form reset reset() { this.form = { }; this.resetForm("form"); }, /** Search button operation */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** Reset button operation */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, //Multiple selection box selects data handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** Add button operation */ handleAdd() { this.reset(); this.open = true; this.title = "Add promotion configuration"; this.isDisable=false; }, /** Modify button operation */ handleUpdate(row) { this.reset(); debugger const id = row.id || this.ids getGiraffeManorInstro(id).then(response => { this.form = response.data; this.open = true; this.isDisable=true; this.title = "Modify promotion configuration"; }); }, /** Submit button */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { debugger if (this.form.id != null) { updateGiraffeManorInstro(this.form).then(response => { this.$modal.msgSuccess("Modification successful"); this.open = false; this.getList(); }); } else { debugger addGiraffeManorInstro(this.form).then(response => { this.$modal.msgSuccess("Add successfully"); this.open = false; this.getList(); }); } } }); }, /** Delete button operation */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('Are you sure to delete the data item titled "' + row.text + '"?').then(function () { return delGiraffeManorInstro(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("Deletion successful"); }).catch(() => { }); } } }; </script>