naive-ui/demo/debugComponents/scrollbarDebug/case1.demo.vue

<template>
  <div class="n-doc-section">
    <div class="n-doc-section__header">
      Scrollbar
    </div>
    <div
      class="n-doc-section__view"
      style="flex-wrap: wrap;"
    >
      <!--EXAMPLE_START-->
      <div style="width: 400px; height: 300px;">
        <n-scrollbar style="max-height: 200px;">
          <div style="background: linear-gradient(red, blue); width: 800px; height: 500px;">
            666
          </div>
        </n-scrollbar>
      </div>
      <div style="width: 400px; height: 300px;">
        <n-scrollbar :max-height="200">
          <div style="background: linear-gradient(red, blue); width: 400px; height: 500px;">
            666
          </div>
        </n-scrollbar>
      </div>
      <div style="width: 400px; height: 300px;">
        <n-scrollbar>
          <div style="background: linear-gradient(red, blue); width: 800px; height: 300px;">
            666
          </div>
        </n-scrollbar>
      </div>
      <div style="width: 400px; height: 300px;">
        <n-scrollbar>
          <div style="background: linear-gradient(red, blue); height: 300px;">
            <div style="background: yellow; width: 100%; color: #000;">
              <n-button block>
                666
              </n-button>
            </div>
          </div>
        </n-scrollbar>
      </div>
      <div style="width: 400px;">
        <n-scrollbar>
          <n-advance-table
            :columns="columns"
            :data="data"
            max-height="300px"
            :on-change="onChange"
          />
        </n-scrollbar>
      </div>
      <!--EXAMPLE_END-->
    </div>
    <pre class="n-doc-section__inspect">Inspect some value here</pre>
    <pre>
      <!--SOURCE-->
    </pre>
  </div>
</template>

<script>
export default {
  data () {
    let d = new Array(20).fill(0)
    d = d.map((item, idx) => {
      return {
        name: 'xiaobai' + idx,
        age: 10 + Math.ceil(Math.random() * 10)
      }
    })
    console.log(d)
    return {
      columns: [
        {
          title: 'Name',
          key: 'name',
          filterMultiple: false,
          filterOptions: [{
            label: 'xiaobai1',
            value: 'xiaobai1'
          }],
          onFilter: 'custom'
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          order: 1, // 默认升序
          sorter: (a, b) => {
            // soter 方法替换默认的sorter函数
            return a.age - b.age
          },
          filterMultiple: true, // 多选 onFilter接受参数为数组
          filterOptions: [{
            label: '14',
            value: 14
          }, {
            label: '15',
            value: 15
          }],
          onFilter: (value, record) => {
            return value.includes(record.age)
            // switch (value) {
            //   case 14:
            //     return record.age <= value
            //   case 15:
            //     return record.age >= value
            // }
          },
          render: (h, params) => {
            return <b>{params.age}</b>
          }
        },
        {
          title: '#',
          render: (h, params) => {
            return (
              <n-button
                style="margin:0;"
                size="small"
                onClick={() => this.handleClick(params)}
              >
                delete
              </n-button>
            )
          }
        }
      ],
      data: d
    }
  },
  methods: {
    handleClick (params) {
      alert('delete' + JSON.stringify(params))
    },
    onChange (...args) {
      console.log(args)
    }

  }
}
</script>