git hooks test
chenkl
5 years ago
parent
5bfe4d236f
commit
216be1cbc5
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<el-backtop
|
||||
target=".main__wrap--content .el-scrollbar__wrap"
|
||||
:bottom="100"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'Backtop'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,12 +1,16 @@
|
||||
import type { App } from 'vue'
|
||||
import SvgIcon from './SvgIcon/index.vue'// svg组件
|
||||
import Dialog from './Dialog/index.vue'// Dialog组件
|
||||
import ComTable from './Table/index.vue'// Table组件
|
||||
import ComSearch from './Search/index.vue'// Search组件
|
||||
import ComDetail from './Detail/index.vue'// Detail组件
|
||||
|
||||
import '@/assets/icons' // 引入svg图标
|
||||
|
||||
export function setupGlobCom(app: App<Element>): void {
|
||||
app.component('ComDialog', Dialog)
|
||||
app.component('ComTable', ComTable)
|
||||
app.component('ComSearch', ComSearch)
|
||||
app.component('ComDetail', ComDetail)
|
||||
app.component('SvgIcon', SvgIcon)
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import Table from './table2'
|
||||
|
||||
export default Table
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<c-table />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CTable from './table.vue'
|
||||
export default {
|
||||
components: {
|
||||
CTable
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<a-table :data-source="data" :columns="columns">
|
||||
<template #filterDropdown="{ setSelectedfields, selectedfields, confirm, clearFilters, column }">
|
||||
<div style="padding: 8px">
|
||||
<a-input
|
||||
:ref="c => (searchInput = c)"
|
||||
:placeholder="`Search ${column.dataIndex}`"
|
||||
:value="selectedfields[0]"
|
||||
style="width: 188px; margin-bottom: 8px; display: block;"
|
||||
@change="e => setSelectedfields(e.target.value ? [e.target.value] : [])"
|
||||
@pressEnter="handleSearch(selectedfields, confirm, column.dataIndex)"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="width: 90px; margin-right: 8px"
|
||||
@click="handleSearch(selectedfields, confirm, column.dataIndex)"
|
||||
>
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</el-button>
|
||||
<el-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
|
||||
Reset
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #filterIcon="filtered">
|
||||
<search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
|
||||
</template>
|
||||
<template #customRender="{ text, record, index, column }">
|
||||
<span v-if="searchText && searchedColumn === column.dataIndex">
|
||||
<template
|
||||
v-for="(fragment, i) in text
|
||||
.toString()
|
||||
.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
|
||||
>
|
||||
<mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" class="highlight">
|
||||
{{ fragment }}
|
||||
</mark>
|
||||
<template v-else>{{ fragment }}</template>
|
||||
</template>
|
||||
</span>
|
||||
<template v-else>
|
||||
{{ text }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
const data = [
|
||||
{
|
||||
field: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
field: '2',
|
||||
name: 'Joe Black',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
field: '3',
|
||||
name: 'Jim Green',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
field: '4',
|
||||
name: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchOutlined,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
searchText: '',
|
||||
searchInput: null,
|
||||
searchedColumn: '',
|
||||
columns: [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
field: 'name',
|
||||
slots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'customRender',
|
||||
},
|
||||
onFilter: (value, record) =>
|
||||
record.name
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: visible => {
|
||||
if (visible) {
|
||||
setTimeout(() => {
|
||||
console.log(this.searchInput);
|
||||
this.searchInput.focus();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
field: 'age',
|
||||
slots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'customRender',
|
||||
},
|
||||
onFilter: (value, record) =>
|
||||
record.age
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: visible => {
|
||||
if (visible) {
|
||||
setTimeout(() => {
|
||||
this.searchInput.focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
field: 'address',
|
||||
slots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'customRender',
|
||||
},
|
||||
onFilter: (value, record) =>
|
||||
record.address
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: visible => {
|
||||
if (visible) {
|
||||
setTimeout(() => {
|
||||
this.searchInput.focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSearch(selectedfields, confirm, dataIndex) {
|
||||
confirm();
|
||||
console.log(selectedfields[0]);
|
||||
this.searchText = selectedfields[0];
|
||||
this.searchedColumn = dataIndex;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
handleReset(clearFilters) {
|
||||
clearFilters();
|
||||
this.searchText = '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
::v-deep.highlight {
|
||||
background-color: rgb(255, 192, 105);
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
import { Table } from 'ant-design-vue'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
field: 'name',
|
||||
// slots: { title: 'customTitle', customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
field: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
field: 'address'
|
||||
}
|
||||
]
|
||||
|
||||
const data = [
|
||||
{
|
||||
field: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
tags: ['nice', 'developer']
|
||||
},
|
||||
{
|
||||
field: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
tags: ['loser']
|
||||
},
|
||||
{
|
||||
field: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
tags: ['cool', 'teacher']
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Test',
|
||||
setup() {
|
||||
return () => {
|
||||
return (
|
||||
<Table columns={columns} dataSource={data} v-slots={{
|
||||
title: () => (<div>哈哈</div>)
|
||||
}}>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue