Как сверстать такой список? VUE.JS

Question

Во front-end я новичок. Подскажите, как сверстать данную таблицу? Не знаю как реализовать такую логику. Данные падают извне в виде массива объектов. Один объект соответствует одной строке таблицы.

P.S. На две кнопки справа вверху не обращайте внимания, просто эта таблица является выпадающей при клике на элемент другой таблицы.

upd: немного не так выразился. Сверстать то я сверстал. Я просто не могу понять как реализовать настраиваемое отображение этой таблицы по средствам vue.

upd2: попросили код верстки. Вот кусок html без стилей. Целиком кидать код нет смысла, компонент очень большой, кода много. Эта таблица лишь небольшой фрагмент.

<div class="panel2">
                <!--Верхняя часть, с кнопками-->
                <div class="panel__filter d-flex align-items-center justify-content-between">
                    <div class="p__filter">
                        <span style="margin: 0px 15px;">Отображать по</span>
                        <input type="text" class="count__input" v-model="count" style="margin-right: 58px">
                        <span style="margin-right: 10px;">Страница</span>
                    </div>
                    <div class="d-flex justify-content-end" style="width: 50%">
                        <button class="panel__btn" style="max-width: 350px; margin-right: 10px;">Изменить данные исполнителя</button>
                        <button class="panel__btn" style="max-width: 262px; margin-right: 32px;">Удалить исполнителя</button>
                    </div>
                </div>
                <!--Шапка таблицы, средняя часть-->
                <div class="panel__table__header">
                    <ul class="d-flex align-items-center" style="height: inherit">
                        <li class="ul__elem">Дата</li>
                        <li class="ul__elem">Адрес</li>
                        <li class="ul__elem">Статус</li>
                        <li class="ul__elem">CRM</li>
                        <li class="ul__elem">Отчет</li>
                    </ul>
                </div>
                <!--Контентая часть таблицы-->
                <div class="panel__table">
                    <div class="table__element" v-for="requests in requestList">
                        <ul class="d-flex align-items-center" style="height: inherit">
                            <li class="ul__elem">{{ request.data }}</li>
                            <li class="ul__elem">{{ request.address }}</li>
                            <li class="ul__elem">{{ request.status }}</li>
                            <li class="ul__elem"><a :href="request.crm">Ссылка</a></li>
                            <li class="ul__elem"> <a href="#">Отчет</a></li>
                        </ul>
                    </div>
                </div>
            </div>

Answer 1

забыть про vie.js и другие фремворки. научиться верстать, и работать с обычным js.

Answer 2

Если я вас правильно понял, вам нужно что-то такое? Возможно я навелосипедил тут с вотчером.

new Vue({
        el: "#app",
        data: {
            rows: [
                { date: "1", adress: "Адрес 1", status: "Выполнена", Crm_title: "qwer", Crm_link: "127.0.0.1/crm1",  report_link: "127.0.0.1/report1" },
                { date: "2", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm2",  report_link: "127.0.0.1/report2" },
                { date: "3", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "4", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "5", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "6", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "7", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "8", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "9", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "10", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "11", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
                { date: "12", adress: "Адрес 1", status: "Принята", Crm_title: "qwer", Crm_link: "127.0.0.1/crm3",  report_link: "127.0.0.1/report3" },
            ],
            count: 1,
            currentPage: 1
        },
        methods: {

        },
        watch:{
            // Чтобы текущая строка отображаемая в вершине страницы осталась, после изменения параметра "ОТОБРАЖАТЬ ПО"
            count: function (newval,oldval) {
                let pageInTopIndex = (this.currentPage - 1) * oldval + 1;
                this.currentPage = Math.ceil(pageInTopIndex / newval);
            },
        },
        computed:{
            // Данные которые мы отображаем ( рассчитываются динамически, после изменения одного из параметров)
            paginationData(){
                let start = (this.currentPage - 1) * this.count;
                let end = start*1 + this.count*1;
                return this.rows.slice(start, end);
            },
            // количество страниц ( после изменения ОТОБРАЖАТЬ ПО, произойдет пересчет данной величины)
            countPage(){
                return Math.ceil(this.rows.length / this.count);
            },
            // Список с кнопочками
            paginationList(){
                let list = [];
                list.push(this.currentPage - 1);    // предыдущая
                list.push(this.currentPage);        // текущая страница
                list.push(this.currentPage + 1);    // следующая
                list = list
                    .filter(num => num > 0) // оставляем страницы только больше 0
                    .filter( num => num <= this.countPage); // отсекаем страницы больше самой последней
                // возвращаем список
                return list;
            }
        }
    })

.tr > td{
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div>
        Отображать по
        <input type="number" min="1" :max="rows.length" step="1" v-model="count">
        <br> count = {{count}}
        <br> countPage = {{countPage}}
        <br> currentPage = {{currentPage}}
    </div>
    <div>
        <!--используем пересчитываемый динамически списко, для отображения кнопок-->
        <button v-for="asdf in paginationList"
              @click="currentPage = asdf"
              style="background-color: lightblue; margin-right: 10px"
        > {{asdf}} </button>
    </div>
    <div>
        <table>
            <tr  class="tr" v-for="row in paginationData">
                <td>{{row.date}}</td>
                <td>{{row.adress}}</td>
                <td>{{row.status}}</td>
                <td v-if="row.status === 'Выполнена'" >-</td>
                <td v-if="row.status !== 'Выполнена'" ><a  :href="row.Crm_link">{{row.Crm_title}}</a></td>
                <td><a :href="row.report_link">Отчет</a></td>
            </tr>
        </table>
    </div>
</div>

БЛОГ НА HUSL

Как сверстать такой список? VUE.JS

Ответы (2 шт):