济宁网站建设优化,网站建设基本问题,做下载类网站一年赚多少钱,国外营销企业网站表格中插入图片和icon 文章目录 表格中插入图片和icon一、如何插入图片1、代码2、效果 二、文字添加背景1、代码2、效果 三、表头悬浮提示语四、表头添加图标 一、如何插入图片
1、代码
templatedivel-tablesizesmallborderv-loadingl…表格中插入图片和icon 文章目录 表格中插入图片和icon一、如何插入图片1、代码2、效果 二、文字添加背景1、代码2、效果 三、表头悬浮提示语四、表头添加图标 一、如何插入图片
1、代码
templatedivel-tablesizesmallborderv-loadingloading:datatableDataselection-changeselectel-table-columntypeselectionwidth55/el-table-columnel-table-columnv-for(item, index) in tableHead:keyindexv-binditemaligncenter:min-widthgetMinWidth(item) template slot-scopescopespan v-ifitem.propstatusel-image :srcformatStatus(scope.row[item.prop]).img/el-imagespan :styleformatStatus(scope.row[item.prop]).style{{ scope.row[item.prop] }}/span/spanspan v-else{{ scope.row[item.prop] }}/span/template/el-table-column el-table-columnlabel操作fixedrightaligncenterwidth160template slot-scopescopespantypeprimarysizeminiclassoperate-btnplainclickemitEvent({eventName:detail, params: scope.row})详情/spanspantypeprimarysizeminiclassoperate-btnv-showscope.row.status 运行plainclickemitEvent({eventName:executeOrStop, params: [{row: scope.row, mod: stop}] })停止/spanspantypeprimarysizeminiclassoperate-btnv-showscope.row.status 关闭 || scope.row.status 完成plainclickemitEvent({eventName:executeOrStop, params: [{row: scope.row, mod: start}] })执行/span/template/el-table-column/el-table/div
/templatescriptexport default {props: {tableData: {type: Array,default: () []},head: {type: Array,default: () []}},data() {return {loading: true,columns: [],total: 0,pageNum: 1,pageSize: 10, pageSizes: [10, 20, 50, 100],}},computed: {getMinWidth () {return itemColumn {const len itemColumn.label.toString().lengthreturn ${len * 25}px}},tableHead(){let data this.head// 根据index值对表头进行排序data.sort((a, b) {return a.index - b.index})this.loading falselet columns data.map( v {return {prop: v.prop,label: v.label}})return columns},formatStatus () {const formatMap {关闭: {img: require(../../../../assets/icon/stop.png),style: { color: red }},运行: {img: require(../../../../assets/icon/run.png),style: { color: #086BFF }},完成: {img: require(../../../../assets/icon/complete.png),style: { color: #29CC51 }},等待中: {img: require(../../../../assets/icon/wait.png),style: { color: #333333 }}}return status {return formatMap[status]}}}, methods: {// 分页handleSizeChange (val) {this.pageSize valthis.query()},// 当前页handleCurrentChange (val) {this.pageNum valthis.query()},// 触发查询emitEvent ({eventName, params}) {this.$emit(eventName, params)},// 选中select(val) {this.$emit(handleSelectionChange, val)}}}/scriptstyle langless scoped.operate-btn {color: #4597eb;cursor: pointer;margin-right: 10px;font-size: 12px;}.el-image {vertical-align: middle;margin-right: 5px;}.status-box {line-height: 23px;display: inline-block;}
/style
2、效果 二、文字添加背景
1、代码
templateel-tableborderstripesizesmall:datatableDataselection-changeselectel-table-columntypeselectionaligncenterwidth55/el-table-columnel-table-columnlabel序号typeindexaligncenterwidth55/el-table-columnel-table-columnv-for(item, index) in columns:keyindexv-binditemaligncenter:min-widthgetMinWidth()template slot-scopescopespan v-ifitem.propstatusel-tag :styleformatStatus(scope.row[item.prop]).style{{ scope.row[item.prop] }}/el-tag/spanspan v-else{{ scope.row[item.prop] }}/span/template/el-table-column/el-table
/templatescriptexport default {props: [tableData],data () {return {columns: [{prop: xxx,label: xxx,show-overflow-tooltip: true},{prop: xxx,label: xxx,show-overflow-tooltip: true},{prop: status,label: 状态,show-overflow-tooltip: true},{prop: xxx,label: xxx,show-overflow-tooltip: true},{prop: draftStatus,label: 拟稿状态,show-overflow-tooltip: true},{prop: message,label: 提示信息,show-overflow-tooltip: true},{prop: draftTime,label: 拟稿时间,show-overflow-tooltip: true},]}},computed: {getMinWidth () {return itemColumns {const len itemColumns.label.toString().lengthreturn ${len * 25}px}},formatStatus () {const formatMap {失败: {style: { color: #FF6767 ,border-radius: 15px, background-color: #FFD3D3, border: 1px solid transparent},},成功: {style: { color: #71D18C ,border-radius: 15px, background-color: #95F3B0, border: 1px solid transparent},}}return status {return formatMap[status]}}},methods: {// 选中select(val) {this.$emit(handleSelectionChange, val)},uploadItem(row){this.$emit(uploadItem, row)},overViewItem(row){this.$emit(overViewItem, row)}}
}/scriptstyle langscss scoped.el-button {margin-left: 0px;}.operate-text {color: #4C68EF;cursor: pointer;}/style2、效果 三、表头悬浮提示语 el-table-columnv-for(item, index) in tableHeadTemp:keyindexv-binditemaligncenter:min-widthgetMinWidth(item)template slotheaderel-tooltip classitem effectlight :contentitem.label placementtop-startspan{{ item.label }}/span/el-tooltip/template/el-table-columnel-table-columnv-for(item, index) in tableHeadTemp:keyindexv-binditemaligncenter:min-widthgetMinWidth(item)template slotheaderspan{{ item.label }}el-tooltip classitem effectdark content双击添加SKU placementtop-starti classel-icon-question stylecolor:#606266; //el-tooltip/span/template/el-table-column四、表头添加图标
效果
templateel-tableborderstripesizesmallrefmyTable:datatableDataselection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-column!-- el-table-columntypeindexlabel序号width55/el-table-column --el-table-columnv-for(item, index) in tableColumns:keyindexv-binditemaligncenter:min-widthgetMinWidth(item) template slotheaderdiv v-ifitem.proppwd classpwd-boxspan {{ 密码 }}/spanimg src/assets/static/pwd-show.png alt clickpwdShowOrHide(0)/div/templatetemplate slot-scopescopediv span v-ifitem.proppwd{{ ******** }}/spanspan v-else{{ scope.row[item.prop] }}/span/div/template/el-table-columnel-table-columnlabel操作fixedrightwidth180pxaligncenterv-ifisShowEdit!-- template #defaultscope --template slot-scope{ $index }span classupdate-btn sizesmall clickhandleClick($event, $index, editItem)编辑/spanspan classupdate-btn sizesmall clickhandleClick($event, $index, delItem) 删除 /span/el-table-column/el-table
/templatescript
export default {props:{tableData: {},tableColumns: {},},computed: {getMinWidth () {return itemColumns {const len itemColumns.label.toString().lengthreturn ${len * 25}px}},},data () {return {isShowPwd: false,}},methods: {handleSelectionChange(val){this.$emit(handleSelectionChange, val)},pwdShowOrHide(val) {this.$emit(pwdShowOrHide, val)},}
}/scriptstyle langscss scoped.pwd-box {display: flex;align-items: center;justify-content: center;}/style
