zollero / el-search-table-pagination

🐶 Combine Form, Table and Pagination components of Element UI together.
MIT License
305 stars 79 forks source link

自定义列使用slotName属性时,出现重复 #58

Closed leonpun closed 4 years ago

leonpun commented 4 years ago

我想自定义列,可能是我使用不对么?

new Vue({
  el: '#app',
  data: {
    formOptions: {
      inline: true,
      submitBtnText: 'Search',
      forms: [
        { prop: 'name', label: 'Name' },
        { prop: 'mobile', label: 'Mobile' },
        { prop: 'sex', label: 'Sex', itemType: 'select',
         options: [
           { value: '', label: 'All' },
           { value: 0, label: 'Male' },
           { value: 1, label: 'Female' }
         ]
        }
      ]
    },
    columns: [
      { prop: 'name', label: 'Name', width: 140, slotName: 'test' },
      { prop: 'mobile', label: 'Mobile', minWidth: 180 },
      { prop: 'sex', label: 'Sex', width: 100,
       render: row => {
         const { sex } = row
         return sex === 0 ? 'Male' : sex === 1 ? 'Female' : 'Unknow'
       }
      }
    ],
    tableData: [
      { name: 'Sam', mobile: '15299xxxx', sex: 0 },
      { name: 'Jean', mobile: '13452xxxx', sex: 1 },
      { name: 'Tony', mobile: '187233xxxx', sex: 0 }
    ]
  },
  template:`
    <el-search-table-pagination
      type="local"
      :data="tableData"
      :page-sizes="[5, 10]"
      :columns="columns"
      :form-options="formOptions">

      <el-table-column label="Operate" slot="test" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini">Edit</el-button>
          <el-button
            size="mini"
            type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-search-table-pagination>
  `
})

image