1.隐藏表格列 hide: true,
{
type: ‘input’,
label: ‘主键’,
hide: true,
prop: ‘id’
}
2.编辑列禁用 editDisabled: false,
{
type: ‘input’,
label: ‘主键’,
editDisabled: false,
prop: ‘id’
}
3.隐藏添加列 addDisplay: false,
{
type: ‘input’,
label: ‘主键’,
addDisplay: false,
prop: ‘id’
}
4.列占用宽度 span: 24,
{
type: ‘input’,
label: ‘主键’,
span: 24,
prop: ‘id’
}
5.富文本
安装:npm install avue-plugin-ueditor --save
vue:
<script>
import AvueUeditor from 'avue-plugin-ueditor'
export default {
comments: {
AvueUeditor
},
}
</script>
column:
<script>
{
type: 'input',
label: '科室介绍',
span: 24,
prop: 'introduction',
component: 'avueUeditor',
options: {
action: '/admin/sys-file/upload',
props: {
res: 'data',
url: 'url'
}
}
},
</script>
6.查询条件重置
<avue-crud ref="crud"
:page="page"
:data="tableData"
:search="searchForm">
</avue-crud>
<script>
//重置
reset(){
this.searchForm.name = ''
},
</script>
7.el-tooltip 重写
<avue-crud ref="crud"
:page="page"
:data="tableData"
>
<template slot="skill" slot-scope="scope">
<el-tooltip placement="top">
<div slot="content" style="max-width: 1000px">{{scope.row.skill}}</div>
<span class="intro">{{scope.row.skill}}</span>
</el-tooltip>
</template>
</avue-crud>
<script>
export const tableOption = {
border: true,
index: true,
indexLabel: '序号',
stripe: true,
menuAlign: 'center',
align: 'center',
searchMenuSpan: 6,
dialogClickModal: false,
column: [
{
type: 'input',
label: '擅长领域',
span: 24,
prop: 'skill',
slot: true
}]
}
</script>
<style>
.intro {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
</style>