auve 使用笔记

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>