Ant Design Vue

官網

radio&&radioGroup

• radioGroup
  
  

<template>
  <div>
    <!-- 單選 -->
    <a-radio :value="isTrue" @change="change1">確定</a-radio><br />
    <!-- 單選組 -->
    <a-radio-group
      name="radioGroup"
      :default-value="1"
      @change="change"
      :options="options"
    >
      <a-radio v-for="(item, index) in options" :key="index" :value="value">
      </a-radio>
    </a-radio-group>
  </div>
</template>

<script>
import options from './options.json'
// const options=[
//   {
//     "label": "是",
//     "value": 1
//   },
//   {
//     "label": "否",
//     "value": 2
//   },
//   {
//     "label": "是也不是",
//     "value": 3
//   }
// ]
export default {
  data () {
    return {
      options: options,
      value: '',
      isTrue: 1
    }
  },
  methods: {
    change1 (e) {
      window.console.log(e)
      window.console.log(this.isTrue === e.target.value)
    },
    change (e) {
      window.console.log(e)
      console.log(e.target.value)
      this.value = 'aaaa'
      window.console.log(this.value)
    }
  }
}
</script>

<style></style>

• 匯入json(json中的欄位需用雙引號)

import options from './options.json'

table

<template>
  <div>
    <a-button type="primary" @click="add">
      新增
    </a-button>
    <a-button @click="del">
      刪除
    </a-button>
    <a-table
      v-if="bol"
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
    >
      <span slot-scope="text" slot="age">
        {{ text > 18 ? '成年' : '未成年' }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="edit(record)">編輯</a>
        &nbsp; &nbsp;
        <a-popconfirm title="確認刪除？" @confirm="() => sysAppDelete(text)">
          <a>刪除</a>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
// columns陣列中的每個物件的屬性dataIndex對應:data-source陣列中物件的屬性名就可以實現渲染
const data = []
for (let i = 1; i < 4; i++) {
  data.push({
    key: i,
    name: `小明${i}`,
    age: 32,
    gender: 1,
    tel: '0571-22098909',
    address: 'New York No. 1 Lake Park'
  })
}
export default {
  data () {
    return {
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '是否成年',
          align: 'center',
          dataIndex: 'age',
          scopedSlots: { customRender: 'age' }
        },
        {
          title: '電話',
          align: 'center',
          dataIndex: 'tel'
        },
        {
          title: '地址',
          align: 'center',
          dataIndex: 'address'
        },
        {
          title: '性別',
          align: 'center',
          dataIndex: 'gender',
          customRender: text => {
            if (text == 1) {
              // 前4行資料以a標籤的形式被渲染
              return <span>男</span>
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data,
      selectedRowKeys: [],
      bol: true
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      window.console.log(selectedRowKeys) //選中行的key
      window.console.log(selectedRows) //整行資料
      this.selectedRowKeys = selectedRowKeys
    },
    statusFilter (status) {
      window.console.log(status)
    },
    // 增加
    add () {
      this.data[3] = {
        key: 3,
        name: '小明4',
        age: 32,
        gender: 2,
        tel: '0571-22098909',
        address: 'New York No. 1 Lake Park'
      }
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      window.console.log(this.data)
    },
    // 批量刪除
    del () {
      
    },
    //編輯
    edit (record) {
      window.console.log(record)
    },
    // 刪除
    sysAppDelete (text) {
      window.console.log(text)
    }
  }
}
</script>

<style></style>

• columns陣列中的每個物件的屬性dataIndex對應:data-source陣列中物件的屬性名就可以實現渲染
• 行選擇
  • :row-selection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange
    }"
  • selectedRowKeys ：選中行的key放在這個陣列中
  • onChange：選中項發生變化時觸發（通過this.selectedRowKeys = selectedRowKeys將key新增到selectedRowKeys）
• 插槽
  • customRender函式形式
  • scopedSlots物件
  • text:當前行的值，
  • record:當前行資料

html結構-------------------------
 <span slot="action" slot-scope="text, record">
        <a @click="edit(record)">編輯</a>
        &nbsp; &nbsp;
        <a-popconfirm title="確認刪除？" @confirm="() => sysAppDelete(text)">
          <a>刪除</a>
        </a-popconfirm>
      </span>
js-------------------------------
 scopedSlots: { customRender: 'action' }

modal

<template>
  <div class="add">
    <a-modal v-model="visible" :width="900">
      <div slot="title" class="title">
        增加
      </div>
      <div slot="footer" class="footer">
        <a-button @click="cancel">取消</a-button>
        <a-button @click="sumit">確定</a-button>
      </div>
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
    </a-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: true
    }
  },
  methods: {
    cancel () {
      this.visible = false
      window.console.log('點選了取消')
    },
    sumit () {
      this.visible = false
      window.console.log('點選了確定')
    }
  }
}
</script>

<style>
.title {
  text-align: center;
}
.footer {
  text-align: center;
}
</style>

• 通過slot可以重寫title和footer
• width控制對話方塊的寬度