el-input 最大值/最小值设置
<!-- 最大10 最小1 -->
<el-input type="number" v-model="main_form.nums" oninput="if(value){value=value.replace(/[^\d]/g,1)} if(value<=0){value=1} if(value>10){value=10}"></el-input>
<!-- 最大10 最小1 可以空 -->
<el-input type="number" v-model="main_form.nums" onchange="if(value){value=value.replace(/[^\d]/g,1);if(value<=0){value=1}} if(value>10){value=10}"></el-input>
禁用table表格指定格子的Checkbox
<template>
<div>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" :selectable="selectableState"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
selection_data: []
}
},
methods: {
// 返回false禁用,返回true启用
selectableState(row) {
const state = row.name === 'test'
return !state
},
// 选择的数据
handleSelectionChange(val) {
this.selection_data = val
},
}
}
</script>
隐藏table表格指定格子
<div class="middle">
<el-table :data="tableData" border :cell-class-name="hideSpread">
<el-table-column type="index" label="#"></el-table-column>
<el-table-column type="expand"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
<script>
methods: {
// 隐藏展开符
hideSpread(row) {
if (row.row.name === '张三') return 'myCell'
else return ''
}
}
</script>
<style lang="less" scoped>
.myCell {
.el-table__expand-icon {
display: none;
}
}
</style>
在外部触发el-popover组件
<template>
<div>
<el-button @click="showPopover = !showPopover">Toggle Popover</el-button>
<!-- 加上trigger="manual"属性即可外部触发 -->
<el-popover v-model="showPopover" trigger="manual">
<p>Content of the popover</p>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
showPopover: false,
};
},
};
</script>
table表格重新赋值整行数据
// 获取表格数据源
let tableData = this.tableData;
// 获取需要修改的行的索引
let rowIndex = 0;
// 获取需要修改的行的数据对象
let rowData = { name: 'test', age: '18' }
// 将rowData数据对象重新赋值给表格数据源中对应的行
this.$set(tableData, rowIndex, rowData);
处理 el-table-column 中自动将双空格处理为单空格的默认行为
在 Element-UI 的 el-table-column 中自动将双空格处理为单空格是该组件的默认行为。如果你需要保留双空格,可以通过使用插槽(slot)来实现自定义渲染。
<template>
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="{row}">
<span v-html="preserveWhitespace(row.name)"></span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John Smith' },
{ name: 'Jane Doe' },
],
};
},
methods: {
preserveWhitespace(text) {
return text.replace(/ /g, ' '); // 使用 HTML 实体 替换空格
},
},
};
</script>
同页面多table组件互相影响问题
给每个table添加key即可
<el-table :data="tableData" key="table1">
<el-table-column type="expand">
<template slot-scope="{row}">
<span>{{row.age}}</span>
</template>
</el-table-column>
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column prop="name" label="name"></el-table-column>
</el-table>
<el-table :data="tableData2" key="table2">
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column prop="name" label="name"></el-table-column>
</el-table>
阻止el-form只有一个input时回车触发页面刷新问题
给el-form加上@submit.native.prevent
<el-form :model="form" label-width="auto" @submit.native.prevent>
<el-form-item label="test">
<el-input v-model="form.text"></el-input>
</el-form-item>
<el-form-item class="save-btn">
<el-button type="primary">保存</el-button>
</el-form-item>
</el-form>
或给 el-form-item 加上 @keydown.enter.native.prevent
<el-form :model="form" label-width="auto">
<el-form-item label="test">
<el-input v-model="form.text" @keydown.enter.native.prevent></el-input>
</el-form-item>
<el-form-item class="save-btn">
<el-button type="primary">保存</el-button>
</el-form-item>
</el-form>