鍍金池/ 問答/HTML/ iview的tabel組件中怎么加select組件

iview的tabel組件中怎么加select組件

clipboard.png
這里怎么寫

回答
編輯回答
凹凸曼

第一步:先定義組件,role-compontents.vue
<template>

<div>
    <!-- 常規(guī)選擇 -->
    <Select placeholder="請輸入職位名稱!"
            filterable :not-found-text="'沒有查詢到相關人員!'"
            @on-change="saveUserAndOrganization">
        <Option v-for="option in roleList" :value="option.id" :key="option.id">
            {{option.text}}
        </Option>
    </Select>
</div>

</template>
<script></script>

第二步:在表格頁面中引入定義好的的組件
import role from '@/views/business-components/bd-base-components/role-compontents.vue';

第三步:表格列數(shù)據(jù)中render

{

        key: '',
        title: '選擇職位',
        align: 'center',
        render: (createElement, params) => {
          // role是引入的組件名稱
          return createElement(role, {
            props: {
              dataType: 1,
              userId: params.row.userId
            }
          }, this.$slots.default);
        }
      },
2018年3月10日 10:24
編輯回答
青瓷

表頭中的定義:

{
    title: '卷類型',
    key: 'volumeType',
    align: 'center',
    render: (h, params) => {
        return h('Select', {
            props:{
                value: this.data[params.index].value,
            },
            on: {
                'on-change':(event) => {
                    this.data[params.index].value= event;
                }
            },
        },
        this.options.map(function(option){
            return h('Option', {
                props: {value: option}
            }, option);
        })
        );
    },
},  

select對應data中的數(shù)據(jù):

data: [{value: 這一行中對應的值}]

option參數(shù)對應options中的數(shù)據(jù):

options: ['option1', 'option2']
2017年8月10日 15:13