iview table表格中添加select选择器以及dropdown下拉菜单

iview table表格中添加select选择器以及dropdown下拉菜单

1.需求

• 在上篇的文章iview table表格的自定义样式的基础上，也就是一张table上的某一列改为select框
• 其中一个option选项，hover或click可以伸展出另外一个选择框
• 反显

2.设计

• 查了查资料，就是在table的列里面，使用render函数
• 使那个可以伸展出另一个的选择框作为一个下拉菜单dropdown，若还是写为 select或者option是不能正常展示的
• 或者可以使用cascader级联选择（这个应该是挺好的，但是我还没有去尝试过）

3.实践

• 之前的代码不变

<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暂无数据" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>

• 在其中一列中加入render函数

{
   title: '香蕉',
           key: 'banana',
           render: (h, params) => {
             var data = this.data3;
             return h('div', [
               h(
                 "Select",
                 data.map(function (item) {
                 //默认情况下都为select中的option选项
                   if (item.value !== 'three') {
                     return [h(
                       "Option",
                       {
                         props: {
                           value: item.value,
                           key: item.value
                         }
                       },item.label)]
                   }
                   else {
                   //当value为three的时候，将其置为dropdown，hover上去可以显示下拉菜单
                     return h('Dropdown', {props: {trigger: "hover",placement: 'right-start'}},
                       [
                         h('DropdownItem',[
                           item.label,
                           h('Icon',
                             {
                               props: {
                                 type: "ios-arrow-forward"
                               }
                             })
                         ]) ,
                         h('DropdownMenu',{
                             slot:"list"//应该是表示插入进来的数据为list对象
                           },
                           item.children.map(function (child) {
                             console.log(child)
                             //要用option因为这些选项是可以被选中的
                             return h('Option', {
                               props: {
                                 value: child.value,
                                 key: child.value
                               }
                             }, child.label)
                           })
                         )
                       ])
                   }
                 })
               )]);
           }
         }

• render函数下拉框用到的数据

data3: [
          {
            value: "one",
            label: "一斤",
            children: []
          },
          {
            value: "three",
            label: "三斤",
            children: [
              {
                value: "divideOne",
                label: "一份3斤"
              },
              {
                value: "divideTwo",
                label: "两份各1.5斤"
              }
            ]
          },
          {
            value: "five",
            label: "五斤"
          }
        ]

• 发现额外弹出的下拉菜单被遮挡，又要改css了

• 内嵌的css规定了它的宽度，我发现修改这个值是起作用的

• 不要去改变select框的宽度，而是去改变select的下拉框的宽度，否则会出现一些东西被覆盖的情况

  /*调节选择框的下拉框的宽度*/
.ivu-select-dropdown{
  min-width: 182px!important;
}

• 效果图

• 反显的话需要在render函数中的select的props属性中指定value即可（value是和此demo中的value对应的，例如一斤是“one”,两份各1.5斤是"divideTwo"）

 "Select",{
            props:{
                value:'divideTwo'
              }
          },

4.总结

• render函数iview上没介绍太多，需要去vue的官方文档上去看
• render函数的子元素怎么用括号括起来的，我也不太了解，不过一定要括对，否则根本不是你想要的格式
• 用cascader应该会更好，更方便
• 本人写的不好或者写错的地方，希望大神可以指出来，因为我真是初学者

附

<style>
/*外层table的border*/
  .ivu-table-wrapper {
    border:none
  }
/*底色*/
.ivu-table td{
  background-color: #182328;
  color: #fff;
}
/*每行的基本样式*/
  .ivu-table-row td {
    color: #fff;
    border:none
  }
  /*头部th*/
  .ivu-table-header th{
    color:#FFD3B4;
    font-weight: bold;
    background-color: #212c31;
    border: none;
  }

  /*偶数行*/
  .ivu-table-stripe-even td{
    background-color: #434343!important;
  }
  /*奇数行*/
  .ivu-table-stripe-odd td{
    background-color: #282828!important;
  }
/*选中某一行高亮*/
  .ivu-table-row-highlight td {
    background-color: #d63333!important;
  }
  /*浮在某行*/
  .ivu-table-row-hover td {
    background-color: #d63333!important;
  }
/*调节选择框的下拉框的宽度*/
.ivu-select-dropdown{
  min-width: 182px!important;
}
</style>
<template>
  <div>
    <Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暂无数据" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>
    <Button @click="handleSelectAll(true)">Set all selected</Button>
    <Button @click="handleSelectAll(false)">Cancel all selected</Button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        selecteds: [],
        columns4: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '苹果',
            key: 'apple'
          },
          {
            title: '香蕉',
            key: 'banana',
            render: (h, params) => {
              var data = this.data3;
              return h('div', [
                h(
                  "Select",{
                    props:{
                      value:'divideTwo'
                    }
                  },
                  data.map(function (item) {
                    if (item.value !== 'three') {
                      return [h(
                        "Option",
                        {
                          props: {
                            value: item.value,
                            key: item.value
                          }
                        },item.label)]
                    }
                    else {
                      return h('Dropdown', {props: {trigger: "hover",placement: 'right-start'}},
                        [
                          h('DropdownItem',[
                            item.label,
                            h('Icon',
                              {
                                props: {
                                  type: "ios-arrow-forward"
                                }
                              })
                          ]) ,
                          h('DropdownMenu',{
                              slot:"list"
                            },
                            item.children.map(function (child) {
                              console.log(child)
                              return h('Option', {
                                props: {
                                  value: child.value,
                                  key: child.value
                                }
                              }, child.label)
                            })
                          )
                        ])
                    }
                  })
                )]);
            }
          },
          {
            title: '橘子',
            key: 'orange'
          },
          {
            title: '西瓜',
            key: 'watermelon'
          },
          {
            title: '牛奶',
            key: 'milk'
          },
          {
            title: '面包',
            key: 'Bread'
          },
          {
            title: '盐',
            key: 'salt'
          },
          {
            title: '小麦',
            key: 'wheat'
          },
          {
            title: '大米',
            key: 'rice'
          },
          {
            title: '酱油',
            key: 'soy'
          },
          {
            title: '其他',
            key: 'else'
          }
        ],
        data1: [
          {
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03',
            _checked: true
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          },{
            apple: 'John Brown',
            banana: '18',
            orange: 18,
            watermelon: 'New York No. 1 Lake Park',
            milk: '2016-10-03',
            Bread: 'New York No. 1 Lake Park',
            salt: '2016-10-03',
            wheat: 'New York No. 1 Lake Park',
            rice: '2016-10-03',
            soy: 'New York No. 1 Lake Park',
            else: '2016-10-03'
          }
        ],
        data3: [
          {
            value: "one",
            label: "一斤",
            children: []
          },
          {
            value: "three",
            label: "三斤",
            children: [
              {
                value: "divideOne",
                label: "一份3斤"
              },
              {
                value: "divideTwo",
                label: "两份各1.5斤"
              }
            ]
          },
          {
            value: "five",
            label: "五斤"
          }
        ]
      }
    },
    methods: {
      handleSelectAll (status) {
        // this.$refs.selection.selectAll(status);
        // console.log(this.$refs.selection.$children)
        this.$refs.selection.selectAll(status);
        console.log(this.selection)
      },
      rowClassName :function (row, index) {
        if(index%2==0){
          return 'ivu-table-stripe-even';
        }
        else return 'ivu-table-stripe-odd';
      },
      onSelect(selection,index){
        // console.log(this.$refs.selection.data)
        this.selecteds = selection;
        console.log(this.selecteds)
      }
      /*,
      onDoubleClick(row,index){
        console.log(row)
        //改变为勾选样式
        //将当前行加入到selection
        this.$refs.selection.data[index]._checked=!this.$refs.selection.data[index]._checked
      }*/
    }
  }
</script>